如何只允许列表中的一个链接激活其pop，而禁用其他链接

Question

我有一个链接列表来显示div弹出窗口，其中显示了其他内容，但是单击每个链接将显示其各自的弹出窗口，导致多个弹出窗口一次打开。如果一个已经被点击的链接在弹出窗口关闭之前显示弹出窗口，我如何防止其他链接显示弹出窗口。

我已经尝试了以下代码：

jQuery('a.portfoliobtn').click(function() {
    jQuery(this).addClass('active');

    jQuery('a.portfoliobtn').addClass('notactive');

    if (jQuery(this).hasClass('notactive')) {
        alert("yes")

        return false;


    }else {
        return false;
        }
});

HTML：

<ul id="cat-7" class="cat-list">    
<a class="portfoliobtn" href="#modal_7" role="button" data-toggle="modal"><div class="cat-title"><i class="fa fa-bullhorn fa-5x"></i> Advertising </div> </a>   

        <div id="modal_7" class="modal hide" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">

        <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" title="Close" aria-hidden="true">X</button>
                <h3 id="myModalLabel">Advertising</h3>
            </div>



            <li id="post-48" class="list-item clearfix">
                <div class="modal-body">
                    <div class="thumb-box"><img width="792" height="612" src="http://placehold.it/350x150" class="attachment-post-thumbnail wp-post-image" alt="Adolfo-Dominguez" /></div>

                </div>

            </li>    




            <li id="post-55" class="list-item clearfix">
                <div class="modal-body">
                    <div class="thumb-box"><img width="792" height="612" src="http://placehold.it/350x150" class="attachment-post-thumbnail wp-post-image" alt="caribbean-airlines" /></div>

                </div>

            </li>    




            <li id="post-63" class="list-item clearfix">
                <div class="modal-body">
                    <div class="thumb-box"><img width="374" height="149" src="http://placehold.it/350x150" class="attachment-post-thumbnail wp-post-image" alt="ClickMedia" /></div>

                </div>

            </li>    




            <li id="post-161" class="list-item clearfix">
                <div class="modal-body">
                    <div class="thumb-box"><img width="359" height="127" src="http://placehold.it/350x150" class="attachment-post-thumbnail wp-post-image" alt="Lonsdale-Saatchi-&amp;-Saatchi" /></div>

                </div>

            </li>    


                </div>

    </ul>

    Airlines and Travel                             X             Airlines and Travel

Answer 1

假设你在bootstrap 3的bootstrap 2.3.2上，它是不同的，所以让我知道。

var modalOpen = false;

$('.modal').on('show', function () {
    modalOpen = true;
});
$('.modal').on('hidden', function () {
    modalOpen = false;
})     

jQuery('a.portfoliobtn').click(function(event) {
    if(modalOpen)
        return false;
});