Question

我需要在点击时创建气泡弹出窗口，但是我遇到了能够打开无限气泡的麻烦。我只需要一次打开一个弹出窗口，所以我补充说：

if（$（'。icon'）。HasBubblePopup（））{alert（'请在打开另一个之前关闭当前弹出窗口。'）;返回false; }

我的问题是，在打开和关闭一个或两个弹出窗口后会显示此警告，即使看起来没有弹出窗口打开。

我的HTML：

<img id="icon01" class="icon" src="images/icon01.png">
<img id="icon02" class="icon" src="images/icon02.png">
<img id="icon03" class="icon" src="images/icon03.png">

我的jQuery：

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery-bubble-popup-v3.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    var icon01 = 
        '<div class="popup">' +
        '<h2>First Title</h2>' +
        '<p>Sweet jelly beans macaroon cheesecake cookie caramels chocolate cake gummi bears muffin.</p>' +
        '</div>';
    var icon02 = 
        '<div class="popup">' +
        '<h2>Second Title</h2>' +
        '<p>Bonbon lollipop soufflé halvah chupa chups jelly beans.</p>' +
        '</div>';
    var icon03 = 
        '<div class="popup">' +
        '<h2>Third Title</h2>' +
        '<p>Pastry bear claw wafer candy candy sweet roll chocolate bar chocolate cake.</p>' +
        '</div>';

    $('.icon').click(function() {
        var iconID = this.id;

        if ($('.icon').HasBubblePopup()) {
            alert('Please close current popup before opening another.');
            return false;
        }

        $('.icon').CreateBubblePopup();
        var iconClick = $(this);
        var bubblePopupID = iconClick.GetBubblePopupID();
        iconClick.ShowBubblePopup({
            position : 'top',
            align    : 'center',
            innerHtml: eval(iconID),
            innerHtmlStyle: {
                                color:'#000',
                                'text-align':'center'
                            },
            themeName:  'grey',
            themePath:  'images/jquerybubblepopup-themes'
        }, false);

        iconClick.FreezeBubblePopup();
        $('#' + bubblePopupID).click(function() {
            $(iconClick).RemoveBubblePopup();
        });
    });
});
</script>

Page I我正在努力：http://www.dynasoft2000.com/fire

编辑：我决定不使用警报，关闭当前弹出窗口并打开新弹出窗口将是一个更好的解决方案。这是我的最终代码：

    $('.icon').click(function() {
        var iconID = this.id;

        if ($('.icon').map(function() {
            if ($(this).HasBubblePopup())
                return true;
        })[0]) {
            $('.icon').RemoveBubblePopup();
        }

        var iconClick = $(this);
        iconClick.CreateBubblePopup();
        var bubblePopupID = iconClick.GetBubblePopupID();
        iconClick.ShowBubblePopup({
            position : 'top',
            align    : 'center',
            innerHtml: eval(iconID),
            innerHtmlStyle: {
                                color:'#000',
                                'text-align':'center'
                            },
            themeName:  'grey',
            themePath:  'images/jquerybubblepopup-themes'
        }, false);

        iconClick.FreezeBubblePopup();
        $('#' + bubblePopupID).click(function() {
            $(iconClick).RemoveBubblePopup();
        });
    });

Answer 1

你应该在创建buble时中继到当前元素，HasBublePipup也可以工作，我用map包装它; 将代码更改为：

$('.icon').click(function() {
        var iconID = this.id;

        if ($('.icon').map(
           function() {
            if ($(this).HasBubblePopup()) return true;
            }
           )[0]); { //<-HERE
            alert('Please close current popup before opening another.');
            return false;
        }
        var iconClick = $(this);
        iconClick.CreateBubblePopup(); // <-- AND HERE
        var bubblePopupID = iconClick.GetBubblePopupID();
        iconClick.ShowBubblePopup({
            position : 'top',
            align    : 'center',
            innerHtml: eval(iconID),
            innerHtmlStyle: {
                                color:'#000',
                                'text-align':'center'
                            },
            themeName:  'grey',
            themePath:  'images/jquerybubblepopup-themes'
        }, false);
        iconClick.FreezeBubblePopup();
        $('#' + bubblePopupID).click(function() {
            $(iconClick).RemoveBubblePopup();
        });
    });

用于jQuery Bubble Popup v.3的HasBubblePopup函数问题返回True

1 个答案: