Question

我使用Bootstrap 3编写了以下代码，但不幸的是模态窗口没有显示。我不知道它有什么问题。请帮忙。：）

<head>
    <!-- Loading Bootstrap -->
    <link href="css/bootstrap.min.css" rel="stylesheet">
    <link href="css/custom.css" rel="stylesheet">
</head>
<body>
    <div class="container"> 
        <div class="row">
            <ul class="thumbnails">
                <li class="col-lg-4 col-md-4 thumb">
                    <a class="thumbnail" href="#bell" data-toggle="modal" data-target="#bell"><img src="img/thumbs/1.jpg"></a>
                </li>
            </ul>
        </div>
    </div>

    <!-- Modal Windows -->
    <div id="bell" class="modal hide fade" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal">x</button>
                    <h3>Title</h3>
                </div>
                <div class="modal-body">
                    <p><img src="img/1.jpg" alt="" class="pull-right">Description</p>
                </div>
                <div class="modal-footer">
                    <button class="btn" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
    <!-- Javascript -->
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
</body>
</html>

Answer 1

您只需要从模式容器中删除hide类（#bell）。

由于它已经拥有modal类，因此Bootstrap知道在激活之前隐藏它。

请参阅Fiddle

Answer 2

你需要在bootstrap之前包含jQuery。

引导程序的第一行检查是否加载了jQuery并且它没有在DOM上做好准备

if("undefined"==typeof jQuery)throw new Error("Bootstrap's JavaScript requires jQuery");

莫代尔窗口没有显示

2 个答案: