Question

我使用Bootstap 3完成了这个简单的模态形式，我不知道为什么当我点击按钮时它没有出现。

<div id="modal" class="modal hide fade in" style="display: none;">
    <div class="modal-header">  
        <a class="close" data-dismiss="modal">×</a>  
        <h3>Some title</h3>  
    </div>  
    <div class="modal-body">  
        <form id="modal-form" accept-charset="UTF-8" action="/mailing" data-remote="true" method="post">
            <label>Name:</label>
            <input type="text" class="span6">  

            <label>Email:</label>
            <input type="text" class="span6">  

            <label>Message:</label>
            <textarea type="text" class="span12" rows="4"></textarea>
        </form>
    </div> 
    <div class="modal-footer">
        <a href="#" class="btn btn-success">Send</a>  
        <a href="#" class="btn" data-dismiss="modal">Cancel</a>  
    </div>  
</div>

这是点击时应该显示此模态窗口的按钮：

<p class="text-center">
    <a data-toggle="modal" href="#modal" class="btn btn-success btn-lg">
        <span class="glyphicon glyphicon-envelope"></span>
                    Message me
    </a>
</p>

与我在网络上看到的示例代码没什么不同，但我不能让模态窗口出现。

知道为什么它不起作用吗？

编辑：

这就是我包含Bootstrap JS文件的方式：

<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" />

Answer 1

尝试从模态div中删除类hide：
<div id="modal" class="modal fade in" style="display: none;">

Answer 2

你没有bootstrap的js文件。这些不是js文件，而是bootstrap的css文件。在结束标记之前将其包含在body元素中＆LT; /体＆GT;

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

需要css和js文件

Answer 3

以防其他人有“为什么不会这个疯狂的事情”的时刻。我有同样的问题，但其他模态形式正在发挥作用。最后，我意识到我有服务器端代码来处理按钮点击以及模态的东西。服务器端代码赢了，不幸的是我没有编码。

因此，请检查服务器端代码。

Bootstrap 3模态形式没有出现

3 个答案: