Twitter bootstrap Bootstrap动态管理模型

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

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

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

当两个选项卡都打开时，其中一个随机选项卡无法打开相应的模式（仅显示模式背景div）

每个模态都有不同的ID

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

$（文档）.ready（函数（）{
$（'MYMODAL'u ID'）.modal（'hide'）；
$（'.edit_user_btn'）.live（“单击”，函数（）{
FRMUPDPROFILE_profilesid=$（this.attr（“值”）；
$（'MYMODAL'u ID'）.modal（'show'）；
$（'input[name=FRMUPDPROFILE\U profileID]'）.val（FRMUPDPROFILE\U profilesid）；
})
});

我需要控制每个模态，使用独立的状态（淡入或淡出），使它们之间没有冲突

模态调用是：

$（'.edit_user_btn'）.live（“单击”，函数（）{

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

我正在使用Bootstrap3.0

---

任何帮助都将不胜感激！

如果我理解了这个问题，我认为您只需要一种独特的方式来调用它们。假设您的选项卡不能使用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>

---

希望有帮助

这不是我想象中的方式，但是是的，工作很有魅力！非常感谢。

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