说明弹窗

css/main.css

@@ -22,6 +22,9 @@ a{
 .dropdown-item:focus, .dropdown-item:hover{
   background-color: #f7f7f9
 }
+.text-indent {
+  text-indent:26px;
+}
 /*自定义css*/
 .header {
   border-bottom: 1px solid #ccc

zaojiashu.html

@@ -37,7 +37,7 @@
                 <span class="text-muted px-1">\</span>
                 <span><i class="fa fa-sticky-note-o"></i></span>
                 <span class="text-truncate"  data-toggle="tooltip" data-placement="bottom" title="乌恰县S309线K72+100-开普太西水库-苏约克村公路建设工程">&nbsp;乌恰县S309线K72+100-开普太西水库-苏约克村公路建设工程</span>
-                <ul class="f-nav list-unstyled">
+                <!-- <ul class="f-nav list-unstyled">
                     <li class="d-flex justify-content-between focus"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程1</span><i class="fa fa-caret-right text-muted mt-1"></i>
                         <ul class="s-nav list-unstyled">
                             <li class="d-flex"><a href="#"><span class="title text-truncate"><i class="fa fa-sticky-note-o"></i> 土建1</span></a></li>
@@ -49,7 +49,7 @@
                     <li class="d-flex justify-content-between"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程3</span><i class="fa fa-angle-right text-muted mt-1"></i></li>
                     <li class="d-flex justify-content-between"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程4</span><i class="fa fa-angle-right text-muted mt-1"></i></li>
                     <li class="d-flex justify-content-between"><span class="title text-truncate"><i class="fa fa-cube"></i> 单项工程5</span></li>
-                </ul>
+                </ul> -->
             </div>
             <div class="ml-auto navbar-text p-0">
               <ul class="nav navbar-nav">
@@ -294,6 +294,8 @@
                               <a href="javacript:void(0);" class="btn btn-secondary m-3" data-toggle="modal" data-target="#jqaz">右键“计取安装费用”</a>
                               <a href="javacript:void(0);" class="btn btn-secondary m-3" data-toggle="modal" data-target="#ntwz">粘帖位置选择</a>
                               <p>
+                                <a href="javacript:void(0);" class="btn btn-secondary m-3" data-toggle="modal" data-target="#help">说明弹窗</a>
+                              <p>
                               <!-- HTML to write -->
 <a href="#" data-toggle="tooltip" title="Some tooltip text!">Hover over me</a>
 
@@ -1849,6 +1851,38 @@
             </div>
         </div>
     </div>
+    <!--弹出 说明弹窗-->
+    <div class="modal fade" id="help" data-backdrop="static">
+        <div class="modal-dialog modal-lg" role="document">
+            <div class="modal-content">
+                <div class="modal-header">
+                  <h5 class="modal-title">说明</h5>
+                  <button type="button" class="close" data-dismiss="modal" aria-label="Close">
+                    <span aria-hidden="true">&times;</span>
+                  </button>
+                </div>
+                <div class="modal-body">
+                  <div class="modal-auto-height">
+                    <h3>标题1</h3>
+                    <h4>标题2</h4>
+                    <h5>标题3</h5>
+                    <p>这是一行文本</p>
+                    <p>这是一行<b>文本</b></p>
+                    <p class="text-indent">这是一行带缩进的文本</p>
+                    <table class="table table-sm table-bordered">
+                        <tr><th>表头1</th><th>表头2</th><th>表头3</th></tr>
+                        <tr><td>内容1</td><td>内容2</td><td>内容3</td></tr>
+                        <tr><td>内容4</td><td>内容5</td><td>内容6</td></tr>
+                      </table>
+                  </div>
+                </div>
+                <div class="modal-footer">
+                    <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
+                    <a href="" class="btn btn-primary">确定</a>
+                </div>
+            </div>
+        </div>
+    </div>    
     <!-- JS. -->
     <script src="js/jquery/jquery-3.2.1.min.js"></script>
     <script src="js/popper/popper.min.js"></script>