页面中的多个引导模式 [英] Multiple bootstrap modals in a page

问题描述

我做了一个自举模式 - 它工作正常。但是当我想在我的网站中的其他地方使用模态时，它会覆盖另一个模态。

I made a bootstrap modal - it's working fine. But when I want to use a modal somewhere else in my site it overwrites the other modal.

我需要更改哪部分代码？我是否必须为每个模态添加数千个额外代码到javascript，或者我可以制作组代码吗？

Which part of the code do I need to change? And do I have to add like thousands of extra code to javascript for each modal, or can I make a group code?

谢谢！

我添加了这个：

$('#clickme').click(function(e) {
$('#showModal').modal('show');


<script>
    function showModal(){
        $("#showModal").modal("show");
     }
</script>

和：

<div class="modal fade" id="showModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="close" data-dismiss="modal">&times;</button> 
                <h4 class="modal-title">Sign me up!</h4>
            </div>
        </div>
    </div>
</div>

推荐答案

不要试图这样做.Bootstrap的模态不是为了支持它。它自己的文档说

Don't try to do this. Bootstrap's modal is not designed to support that. Its own documentation says

确保不打开模态，而另一个模态仍然可见。一次显示多个模态需要自定义代码。

Be sure not to open a modal while another is still visible. Showing more than one modal at a time requires custom code.

应该说很多自定义代码。例如，BS模态使用 body 元素上的一个类，该元素在关闭时被删除。因此，关闭第二个模态也会隐藏第一个模态。然后，您需要特殊代码来检测先前打开的模态并恢复正文中的类。它比它的价值要麻烦得多。

It should have said "a lot of custom code". For instance, BS modals use a class on the body element, that is removed when it closed. Therefore, closing a second modal will also hide the first. Then you need special code to detect that a modal was previously open and restore the class on the body. It's much more trouble than it's worth.

相反，对于第二个模态使用穷人的模态，只是在某个地方弹出一个绝对定位的div。你不需要覆盖屏幕的覆盖层，因为它已经存在于第一个模态中。

Instead, use a "poor man's modal" for the second modal, just an absolutely positioned div you pop up somewhere. You don't need the overlay covering the screen anyway since it's already there from the first modal.

这篇关于页面中的多个引导模式的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！