Question

我需要在一个页面中使用多个bootstrap 3模态。我更改了每个模态框的ID，但这有效但IDs must be unique。

HTML：

<span class="filesicon"><a data-target="#myModal-1" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span>
<span class="filesicon"><a data-target="#myModal-2" href="#" data-toggle="modal" type="button"><i class="mce-ico mce-i-browse"></i></a></span>

<div class="modal fade" id="myModal-1">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body" style="padding:0px; margin:0px width: 560px;">
                <iframe width="560" height="400" src="" frameborder="0" style="overflow: scroll; overflow-x: hidden; overflow-y: scroll; "></iframe>
            </div>
        </div>
    </div>
</div>
<div class="modal fade" id="myModal-2">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title">Modal title</h4>

            </div>
            <div class="modal-body" style="padding:0px; margin:0px width: 560px;">
                <iframe width="560" height="400" src="" frameborder="0" style="overflow: scroll; overflow-x: hidden; overflow-y: scroll; "></iframe>
            </div>
        </div>
    </div>
</div>

我的方式是真的吗？如果没有，请告诉我更好的方式。

Answer 1

我在bootply中使用了您的代码，似乎工作正常。也许你的代码中有其他东西弄乱了你的模态

或尝试

<script> $('#myModal-1').modal(options) $('#myModal-2').modal(options) </script>

初始化。这就像我在类似情况下的诀窍一样。

Answer 2

这是在单个页面上放置多个模态的正确方法。根本没有避免它。

您以相同的方式调用每个模态，只需更改data-target即可反映要显示的所需模式。

<a href="#" class="list-group-item" id="myModal-1-link" data-toggle="modal" data-target="#myModal-1">Modal 1</a>
<a href="#" class="list-group-item" id="myModal-2-link" data-toggle="modal" data-target="#myModal-2">Modal 2</a>

没有任何其他方法可以做到这一点，而不是使用Bootstrap，但我确定还有其他更简单的模态选项，但我怀疑他们使用Bootstrap工作得如此流畅

Answer 3

如果选择使用附加插件，您是否考虑过bootbox.js？

它允许您使用几行javascript而不是庞大的HTML来显示引导模式。

示例显示一个引导模式，要求用户确认某些操作：

bootbox.confirm("Are you sure?", function(result) {
   Example.show("Confirm result: "+result);
});

http://bootboxjs.com/

页面中有多个bootstrap模态窗口

3 个答案: