1

クリック時にバブルポップアップを作成する必要がありましたが、無限のバブルを開くことができないという問題が発生しました。一度に開く必要があるポップアップは1つだけなので、次のように追加しました。

if（$（'。icon'）。HasBubblePopup（））{alert（'別のポップアップを開く前に現在のポップアップを閉じてください。'）; falseを返します。}

私の問題は、ポップアップが開いていないように見えても、1つまたは2つのポップアップを開いたり閉じたりした後にこのアラートが表示されることです。

私の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 に答える