Question

我有以下带有导航栏，3列主体和大页脚栏的HTML。我在导航栏上添加了一个按钮，单击一个模式应弹出的按钮。我使用了WS学校给出的基本示例作为演示。当我将它作为独立页面运行时，WSS演示完美无瑕。但是，当我在我的html中包含相同的示例时，模式不会弹出。我在JSFiddle中也包含了脚本https://jsfiddle.net/3Lonzx1f/2/。

我包括下面的内容：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- View meta tag -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>
        DEMO
    </title>

    <!-- Color CSS Styles  -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>
    <script type="text/javascript" src="https://cdn.rawgit.com/asvd/dragscroll/master/dragscroll.js"></script>

    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />
    <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
    <script src="https://use.fontawesome.com/f87c84f770.js"></script>

    <script src="jtree.js"></script>


    <style type="text/css">
      body, html,  .sidebar, .body .rhsbar{
        height: 100%;
        min-height: 100%;
        }

      html, body {overflow:auto}

      body { padding-bottom: 200px; }

      #container{
          width:100%;
          height:100%;
          /* position:absolute; */
          }

      .sidebar{

          width:25%;
          float:left;
          height:100%;
          border-right: solid 6px #f1ded9;
          overflow-y: auto;
          }

      .body{
          background-color: white;
          float:left;
          width:50%;
          height:100%;
          }

      .rhsbar1{
          background-color: white;
          float:right;
          width:25%;
          height:10%;
          border-left: solid 6px #f1ded9;
          overflow-y: auto;
          }


      .rhsbar2{
          background-color: white;
          float:right;
          width:25%;
          height:90%;
          border-left: solid 6px #f1ded9;
          border-top: solid 6px #f1ded9;    
          }

      .rhsbar2 .xmldirectories{
          margin-top: 50px;
          padding:2px;
          }


      .navbar {
          height: 20px;
          position: absolute;
          background-color: black;
          width:100%;
          border-bottom: solid 6px #f1ded9;
          z-index:999;
          }

      #loaded_img_panel  {
          display:block;
          height: 200px;
          position: relative;
          background-color: white;
          overflow: auto;
          white-space: nowrap;
          border-top: solid 6px #f1ded9;
          }
</style>
</head>

<body>
  <div class="navbar">
      <div class="col-sm-1" style="padding:10px 0 0 0;color:white;">
      </div>

      <div class="col-sm-1" style="padding:5px">
      </div>

      <div class="col-sm-1" style="padding:5px">
      </div>

      <div class="col-sm-3" style="padding:5px 0 0 0;color:white;">      
      </div>

      <div class="col-sm-1" style="padding:5px">
      </div>

      <div class="col-sm-2" style="padding:5px">
      </div>

      <div  class="col-sm-1" style="padding:10px;color:white;">    
      <button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">Open Modal</button>  
      </div>


      <div  class="col-sm-1" style="padding: 5px 0px 0px 0px;color:white;">
      </div>

      <div  class="col-sm-1" style="padding:10px;text-align:right;color:white;text-decoration:none;">
      </div>
  </div>


  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>

    </div>
  </div>

<!-- Php code to list all the match sub folders -->

    <div id="container">
      <div class="sidebar">
      </div>

      <div class="body">
      </div>

      <div class="rhsbar1">
      </div>

      <div class="rhsbar2">        
      </div>
    </div>

    <div id="loaded_img_panel" name="loaded_img_panel" class="dragscroll" >             
    </div>


</body>

</html>

有人可以帮忙吗？

Answer 1

这是因为你缺少bootstrap3 javascript库。只需在jQuery脚本标记

下添加此库

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<强> Updated Fiddle

Bootstrap模式不会从导航栏中弹出

1 个答案: