4

我用 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" />
4

3 回答 3

6

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

于 2014-03-15T05:39:51.957 回答
5

你没有bootstrap的js文件。这些不是 js 文件，而是 bootstrap 的 css 文件。将它包含在你的 body 元素中，就在结束标记 </body> 之前

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

css 和 js 文件都需要

于 2013-10-21T13:14:04.457 回答
1

以防万一其他人有“为什么这个疯狂的东西不能工作”的时刻。我有同样的问题，但其他模式形式正在工作。最后，我意识到我有服务器端代码来处理按钮单击以及模态内容。服务器端代码赢了，不幸的是我没有任何代码在那里。

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

于 2018-03-30T19:41:19.543 回答