模态不显示答案

【问题标题】：Modal not displayed模态不显示
【发布时间】：2015-11-10 11:02:00
【问题描述】：

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

模态如下：

<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>

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

【问题讨论】：

你确定你的脚本都正确导入了吗？
请发布一个 jsfiddle 示例或类似内容。此处的示例代码 w3schools.com/bootstrap/… 工作正常。正确包含 bootstrap.css、jquery.js 和 bootstrap.js 很重要。

标签： javascript twitter-bootstrap-3 modal-dialog

【解决方案1】：

我认为您的问题是您没有导入所有必需的库。您必须知道引导程序需要 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>

【讨论】：