javascript - Bootstrap Modal 不显示，输出 JS

Question

我有一个 Bootstrap 模式设置，代码如下:

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <a class="close" data-dismiss="modal">×</a>
        <h3>Testimonials</h3>
    </div>
    <div class="modal-body">
        <p>Test Text Here</p>
    </div>
    <div class="modal-footer">
        <a class="btn" data-dismiss="modal">Close</a>
    </div>
</div>

<button class="btns btn-3 btn-3g btnsx" data-toggle="modal" href="#myModal">More</button>

但是，单击按钮时我只得到黑色背景。

我还看到我的一些 js 出现在我的页面底部(仅当插入模态代码时):

.on('submit', function() { var form = $(this); var post_data = form.serialize(); //Serialized the form data for process.php $('#loader').html('loadng Please Wait...'); $.ajax({ type: 'POST', url: 'http://shazconstruction.com/test/process.php', // Your form script data: post_data, success: function(msg) { $('#loader').html(''); // We know this is the form that needs fading in/out $('form#contactUs').fadeOut(500, function(){ $('form#contactUs').html(msg).fadeIn(); }); } }); return false; }); });

这是一切都存在的网站: http://bit.ly/1dbf4Rz

作为引用，这是模态设置的部分: http://i.imgur.com/1SlNR1s.png

Answer 1

检查页面的来源。然而，它的生成有一个非常明显的错误:http://screencast.com/t/GZv0KwPktoO

查看第 762 行。没有开始脚本标记，所以这可以解释为什么您会看到您的 JS 出现在页面底部。

至于其余部分，BaBL86 是正确的，您将需要解决鼠标滚轮脚本的问题，因为它会抛出导致页面停止呈现 JS 的错误。

一旦这两个问题得到解决，如果还有问题，请告诉我们。

编辑:您的模态窗口的 HTML 也不正确(基于 bootstrap 3 文档)。尝试改用它，并将模态窗口移动到 body 标签之后:

<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">
                <a class="close" data-dismiss="modal">×</a>
                <h3>Test Header</h3>
            </div>
            <div class="modal-body">
                <p>Test Text Here</p>
            </div>
            <div class="modal-footer">
                <a class="btn" data-dismiss="modal">Close</a>
            </div>
        </div>
    </div>
</div>