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

鼠标滚轮功能出错。检查这个答案，就是这个问题：

function handler(event) {
    < ---- >
    return $.event.handle.apply(this, args); // error here
}

将您的功能编辑为：

    return $.event.dispatch.apply(this, args);

Answer 2

查看您的信息来源。然而，它的生成有一个非常明显的错误：http://screencast.com/t/GZv0KwPktoO

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

至于其余部分，BaBL86是对的，你会想要用鼠标滚轮脚本解决问题，因为它会抛出导致页面停止渲染JS的错误。

修复这两个问题后，请告知我们是否仍有问题。

编辑：您的模态窗口也有不正确的HTML（基于bootstrap 3文档）。请尝试使用此功能，并将模态窗口移动到正文标签后面：

<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>

Answer 3

您已将!important提交给.hide。删除imporant

从此

display: none!important;

要

display: none;

我还可以看到你没有给出任何background-color。使用bootstrap

中的相同代码

Bootstrap模态不显示，输出JS

3 个答案: