Question

我按照教程做了一个简单的模态，当我点击按钮时，模态没有显示出来。我尝试将href更改为data-target，但这并不能解决问题。下面的代码是模态代码。我的CSS或JavaScript文件中没有任何内容。

<a data-target="#myModal" role="button" class="btn btn-warning" data-toggle="modal"><span class="glyphicon glyphicon-hand-up"></span>Sign up for weekly newsletter</a>

<div class="modal fade" id="myModal">
              <div class="modal-dialog">
                <div class="modal-content">
                  <div class="modal-header">
                    <button class="close" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title">Sign up for the newsletter</h4>
                    <div class=modal-body>

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

这是CodePen：http://codepen.io/jordanbaron123/pen/pbamPa

Answer 1

在你的头脑中你需要有以下几点。同时移除身体底部的自举链接。在我看来，你可能已经运行了一个过时的bootstrap js版本。

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>

以下是Codepen作为示例。

Answer 2

尝试将模态html放在html的根目录中，可能是在body标签之后。它可以放在所有html的底部，但作为主体的直接嵌套元素或之后的一个div。

Modal html可以立即嵌套以下内容：

body＆gt; div＆gt; modal html
body＆gt; modal html

然后它会起作用。否则，如果将模态html放在许多嵌套元素中，那么它就不起作用。

谢谢。

Bootstrap 3模式不在按钮单击上工作

2 个答案: