Question

我正在尝试使用Bootstrap创建一个简单的界面。我有一个小页面，有一些东西。它工作正常，但后来我想添加一个模态元素。我直接从第二个bootstrap example获取了这个例子。但是当我尝试使用它时，只会出现阴影，因为按钮没有出现，我无法退出它。为什么我不能让模态工作？

初始代码：

    <!DOCTYPE html>
<html>
  <head>
    <title>Bootstrap 101 Template</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta charset="utf-8">  
    <link rel="stylesheet" type="text/css" href="style.css">
      <!-- Bootstrap -->
    <link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery.js"></script>

    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

      <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
      <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
<div class="container">
    <div class="row border-top-bottom">
        <div class="col-sm-1">
        <h5>WEEK 1</h5> 
        </div>
        <div class="col-sm-2 border-right">    
            <a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>
            <a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click"><img src="http://placehold.it/50x50"></a>
            <p><a href="#" class="btn btn-default" rel="popover" data-content="output" data-placement="right" data-trigger="click"><img src="http://placehold.it/50x50"></a></p>
        </div>
        <div class="col-sm-6">
            <div class="panel panel-info">
                <div class="panel-heading">
                    <h3 class="panel-title">This weeks project tittle</h3>                
                </div>
                <div class="panel-body">
                    <p>Project description: ba nananananana nananananana nananananana nananana nana batman!</p>
                </div>
            </div>
        </div>
    </div>
</div>
    <script>
    $('.btn').popover();
</script>
  </body>
</html>

添加了模态代码：

<a href="#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a>

<!-- Modal -->
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>

Answer 1

在您的模态代码中，您有class="modal hide fade"我不确定hide部分的用途。我认为这是旧版本和您使用的新版本？

这阻止了实际的模态窗口显示。但是，这是正确的模态窗口代码，应该可以正常工作。

Replace:


 <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
   <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
         <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
         <h4 class="modal-title" id="myModalLabel">Modal title</h4>
        </div>
       <div class="modal-body">
         ...
       </div>
     <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
     </div>
    </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
  </div><!-- /.modal -->

Answer 2

您需要加载Bootstrap的javascript文件才能启动模式。尝试将bootstrap.min.js文件添加到头标记中，如下所示：

<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>

Answer 3

您正在混合bootstrap 2.3和3.0。它们不兼容。

模态对话框的html来自bootstrap 2.3.2

尝试更改为此，它应该有效：

<div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">Modal header</h3>
  </div>
  <div class="modal-body">
    <p>One fine body…</p>
  </div>
  <div class="modal-footer">
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
    <button class="btn btn-primary">Save changes</button>
  </div>
</div>
</div>
</div>

Bootstrap Modal不会出现

3 个答案: