Question

我已在我的应用程序的前端放置了一个示例模式。

模态如下：

<div id="myModal" class="modal fade" role="dialog">
     <div class="modal-dialog">

          <!-- Modal content-->
          <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>

我从这里得到了模态的代码： http://www.w3schools.com/bootstrap/bootstrap_modal.asp

模态嵌套如下：

<div className="col-md-4 no-padding max-height-col">
    <div className="panel panel-default no-padding max-height">
      <div className="panel-heading" >
        <h2 className="panel-title headingText">
            Attributes   <span className="glyphicon glyphicon-plus" aria-hidden="true"></span>

            <!-- Trigger the modal with a button -->
            <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>

            <!-- Modal -->
            <div id="myModal" class="modal fade" role="dialog">
                <div class="modal-dialog">

                    <!-- Modal content-->
                    <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>

        </h2>
      </div>
    </div>
</div>

但是，当我将代码部署到服务器时，模式的代码不会出现在页面中。我确信我正在构建和正确部署。关于为什么会发生这种情况的任何想法？

Answer 1

我认为您的问题是您没有导入所有必需的库。你必须知道bootstrap需要JQuery，如果你不包含它，你的模态将不会显示。这个例子工作（我也把JQuery包括在内）

<html>
  <head>
    <title>Hello</title>
      <link href='bootstrap-3.3.5-dist/css/bootstrap.min.css' rel='stylesheet' />
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
      <script src='bootstrap-3.3.5-dist/js/bootstrap.min.js'></script>
  </head>
  <body>
    <button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
    <div id="myModal" class="modal fade" role="dialog">
      <div class="modal-dialog">

         <!-- Modal content-->
         <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>
   </body>
</html>

模态未显示

1 个答案: