开发者问题收集

Bootstrap 模式问题

2015-01-15
462
twitter-bootstrap modal-dialog

我在我的最新项目中使用了 twitter bootstrap。除其中一个页面外，所有页面均运行正常。

单击链接会弹出一个模式，我可以使用关闭按钮或模式右上角的关闭图标将其关闭。

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

下面是 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/

有人可以看看它并告诉我我的问题。 谢谢

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/

tmg
2015-01-15