Question

是否可以在同一个窗口中管理多个引导模式，具有不同的操作，但在其他div中具有相似的内容？

更好地解释：我正在使用jQuery UI Tabs来控制我正在处理的系统的工作空间。因此，当您单击菜单项时，将打开一个包含内容的新选项卡。

问题是：我有两个带有一些选项的选项卡，每个选项卡都有自己的引导模态。

当两个标签都打开时，它们中的一个随机无法打开相应的模态（只显示模态背景div）。

每个模态都有不同的ID。

为了控制每个模态在打开时的作用，我尝试使用以下脚本：

 $(document).ready(function() {
     $('#MYMODAL_ID').modal('hide');
     $('.edit_user_btn').live("click", function() {
         FRMUPDPROFILE_profilesid = $(this).attr("value");
         $('#MYMODAL_ID').modal('show');
         $('input[name=FRMUPDPROFILE_profileID]').val(FRMUPDPROFILE_profilesid);
     })
 });

我需要控制每个模态，具有独立状态（淡入或淡出），所有这些模式之间没有冲突。

模态调用是：

$('.edit_user_btn').live("click", function() {

如果我有5个模态，它们必须以独立模式打开，工作和关闭，因为我说每个模态都有一个唯一的ID。

我正在使用Bootstrap 3.0

任何帮助将不胜感激！

Answer 1

如果我理解这个问题，我认为你只需要一种独特的方式来调用它们。假设您的选项卡不能与ajax一起使用，请预定义所有5个模态，然后在链接中添加一个名为modal_id的自定义属性（例如），并将值设置为模态的唯一ID，如下所示：

<!-- Modals links - can be anywhere -->
<a href="#" class="btn btn-default edit_user_btn" modal_id="MYMODAL_1">Edit link for 1</a>
<a href="#" class="btn btn-default edit_user_btn" modal_id="MYMODAL_2">Edit link for 2</a>

<!-- modal 1 -->
<div id="MYMODAL_1" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Modal 1 header</h3>
    </div>
    <div class="modal-body">
        <p>modal 1 content here…</p>
        <a href="#" class="btn btn-default edit_user_btn" modal_id="MYMODAL_2">Edit link for 2</a>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
    </div>
    </div>
</div>
</div>

<!-- modal 2 etc -->
<div id="MYMODAL_2" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
    <div class="modal-content">
        <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
            <h3>Modal header 2</h3>
    </div>
    <div class="modal-body">
        <p>modal 2 content here…</p>
    </div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal">Close</button>
    </div>
    </div>
</div>
</div>

然后，跟随jQuery将每次从任何地方调用正确的模态

$('.edit_user_btn').click(function(){
    var modal_id = $(this).attr('modal_id');
    $("#" + modal_id).modal({show:true})
});

希望有所帮助

Bootstrap动态管理模块

1 个答案: