引导模式问题答案

【问题标题】：Bootstrap modal issue引导模式问题
【发布时间】：2015-01-15 10:07:49
【问题描述】：

我在我的最新项目中使用了 twitter 引导程序。一切正常，除了其中一页。

点击链接会弹出一个模态框，我可以使用关闭按钮或模态框右上角的关闭图标来关闭它。

但是，如果我使用关闭按钮关闭模式，然后尝试再次打开它（或与此相关的任何其他链接），关闭按钮被禁用，我只能使用右上角的图标关闭模式。

以下是 jsfiddle 的链接以及我的代码副本，您可以在其中查看实时结果。

只有一个模态可以通过链接传递数据，但这还没有实现。

<h3>Select a role to edit it.</h3>
<div style="width:auto">
<ul class="nav nav-pills nav-stacked">
<li><a href="#" data-toggle="modal" data-target="#roleEditModal">(920)Active Directory Management</a></li>
<li><a href="#" data-toggle="modal" data-target="#roleEditModal">(904)Cisco Router - Administration </a></li>
<li><a href="#" data-toggle="modal" data-target="#roleEditModal">(914)Cisco Router - Installation</a></li>
<li><a href="#" data-toggle="modal" data-target="#roleEditModal">(918)Development - Analysis</a></li><li><a href="#" data-toggle="modal" data-target="#roleEditModal">(908)Development - Project Management</a></li>
<li><a href="#" data-toggle="modal" data-target="#roleEditModal">(936)Fire Wall - Administration</a></li>
</ul>
</div>        
        <!-- Modal -->
        <div class="modal" id="roleEditModal" tabindex="-1" role="dialog" aria-labelledby="roleEditModalLabel" aria-hidden="true">
            <div class="modal-dialog">
            <div class="modal-content">
            <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="editModal">Edit role:</h4>
            </div>
            <div class="modal-body">

            </div>
            <div class="modal-footer">
            <button type="button" id="btn_roleEditClose" class="btn btn-default" data-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>

http://jsfiddle.net/dzfbyu6t/

有人可以看看它，让我知道我的问题出在哪里。谢谢

【问题讨论】：

标签： twitter-bootstrap modal-dialog

【解决方案1】：

您添加的 javascript 导致了问题。

    $(".btn").click(function(e) {
    if (! $(this).hasClass("disabled"))
        {
            $(".disabled").removeClass("disabled").attr("rel", null);

            $(this).addClass("disabled").attr("rel", "tooltip");
        }
    });

如果您将其注释掉，则效果很好。 http://jsfiddle.net/dzfbyu6t/1/

【讨论】：