1

我需要在点击时创建气泡弹出窗口，但我遇到了无法打开无限气泡的问题。我一次只需要打开一个弹出窗口，所以我添加了：

if ($('.icon').HasBubblePopup()) { alert('请先关闭当前弹出窗口，然后再打开另一个。'); 返回假；}

我的问题是，在打开和关闭一个或两个弹出窗口后会出现此警报，即使它似乎没有打开任何弹出窗口。

我的 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>

我正在处理的页面：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();
        });
    });
4

1 回答 1

1

您应该在创建 buble 时中继到当前元素，HasBublePipup 也可以正常工作，我用地图包装它；将代码更改为：

$('.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();
        });
    });
于 2013-01-31T00:59:36.030 回答