带验证版历史记录弹窗

css/main.css

@@ -261,3 +261,7 @@ body {
   width:inherit;
   height: inherit;
 }
+.modal-fixed-height {
+  height: 400px;
+  overflow-y: auto;
+}

zaojiashu.html

@@ -64,7 +64,7 @@
                     </div>
                 </li>
                 <li class="nav-item">
-                    <a class="nav-link" href="#" aria-haspopup="true" aria-expanded="false"><i class="fa fa-history"></i> 历史记录</a>
+                    <a href="javacript:void(0);" data-toggle="modal" data-target="#history" class="nav-link"><i class="fa fa-history"></i> 历史记录</a>
                 </li>
             </ul>
             <form class="form-inline">
@@ -2313,6 +2313,68 @@
             </div>
         </div>
     </div>
+    <!--弹出历史记录（操作记录）-->
+    <div class="modal fade" id="history" data-backdrop="static">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                  <h5 class="modal-title"><i class="fa fa-history"></i> 历史记录</h5>
+                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                </div>
+                <div class="modal-body modal-fixed-height">
+                  <div class="list-group mb-3">
+                    <div class="list-group-item list-group-item-action flex-column align-items-start">
+                      <div class="d-flex w-100 justify-content-between">
+                        <h6 class="mb-1"><i class="fa fa-clipboard" aria-hidden="true"></i> 粘贴 </h6>
+                        <span>2017-04-05 12:00:38 <a href="" title="撤销此操作" class="ml-2 btn btn-outline-primary btn-sm"><i class="fa fa-undo"></i></a></span>
+                      </div>
+                      <p class="mb-1">101-2-1 挖土方</p>
+                    </div>
+                    <div class="list-group-item list-group-item-action flex-column align-items-start">
+                      <div class="d-flex w-100 justify-content-between">
+                        <h6 class="mb-1"><i class="fa fa-files-o" aria-hidden="true"></i> 复制</h6>
+                        <span>2017-04-05 12:00:03</span>
+                      </div>
+                      <p class="mb-1">101-2-1 挖土方</p>
+                    </div>
+                    <div class="list-group-item list-group-item-action flex-column align-items-start">
+                      <div class="d-flex w-100 justify-content-between">
+                        <h6 class="mb-1"><i class="fa fa-keyboard-o" aria-hidden="true"></i> 输入</h6>
+                        <span>2017-04-05 11:00:30</span>
+                      </div>
+                      <p>土石方</p>
+                    </div>
+                    <div class="list-group-item list-group-item-action flex-column align-items-start">
+                      <div class="d-flex w-100 justify-content-between">
+                        <h6 class="mb-1"><i class="fa fa-keyboard-o" aria-hidden="true"></i> 输入</h6>
+                        <span>2017-04-05 11:00:30</span>
+                      </div>
+                      <p class="mb-1">101-2-1</p>
+                    </div>
+                    <div class="list-group-item list-group-item-action flex-column align-items-start">
+                      <div class="d-flex w-100 justify-content-between">
+                        <h6 class="mb-1"><i class="fa fa-sign-in" aria-hidden="true"></i> 插入</h6>
+                        <span>2017-04-05 11:00:03</span>
+                      </div>
+                      <p class="mb-1">空行清单</p>
+                    </div>
+                    <div class="list-group-item list-group-item-action flex-column align-items-start">
+                      <div class="d-flex w-100 justify-content-between">
+                        <h6 class="mb-1"><i class="fa fa-arrow-up" aria-hidden="true"></i> 上移</h6>
+                        <span>2017-04-05 10:13:13</span>
+                      </div>
+                      <p class="mb-1">103-2-1 XXX</p>
+                    </div>
+                  </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                </div>
+            </div>
+        </div>
+    </div>
     <!-- JS. -->
     <script src="js/jquery/jquery.min.js"></script>
     <script src="js/tether/tether.min.js"></script>