锚标记会打开多个弹出窗口

时间:2019-02-22 21:52:50

标签: jquery html modalpopup

我正在创建一个弹出窗口,如果他们选择的定位标记不是内部链接,则会显示一个弹出窗口,通知用户他们正离开网站。

我能够找到https://developer.mozilla.org/en-US/docs/Web/CSS/filter-function/drop-shadow,其中提供了有关如何创建jquery模态的教程。

    //Create my Pop-Up
var modal = (function(){
    var 
    method = {},
    $overlay,
    $modal,
    $content,
    $close;

    // Center the modal in the viewport
    method.center = function () {
        var top, left;

        top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
        left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;

        $modal.css({
            top:top + $(window).scrollTop(), 
            left:left + $(window).scrollLeft()
        });
    };

    // Open the modal
    method.open = function (settings) {
        $content.empty().append(settings.content);

        $modal.css({
            width: settings.width || 'auto', 
            height: settings.height || 'auto'
        });

        method.center();
        $(window).bind('resize.modal', method.center);
        $modal.show();
        $overlay.show();
    };

    // Close the modal
    method.close = function () {
        $modal.hide();
        $overlay.hide();
        $content.empty();
        $(window).unbind('resize.modal');
    };

    // Generate the HTML and add it to the document
    $overlay = $('<div class="overlay" style="display: none;"></div>');
    $modal = $('<div class="modal" style="width: auto; height: auto; top: 369px; left: 782px; display: none;"></div>');
    $content = $('<div class="content2"></div>');
    $close = $('<a class="close" href="#">close</a>');

    $modal.hide();
    $overlay.hide();
    $modal.append($content, $close);

    $(document).ready(function(){
        $('body').append($overlay, $modal);                     
    });

    $close.click(function(e){
        e.preventDefault();
        method.close();
    });

    return method;
}());

在此示例中,当链接打开到其他站点时将调用弹出窗口:

$( document ).ready(function() {
    $('a:not([href*="/mysiteurl"])').on('click',function(e){
        modal.open({content: "<p>You are now exiting the web site.  When you exit this site to access a different web site, you become subject to the other web site’s privacy policy and practices.  To learn about the other web site’s policy and practices, refer to the privacy policy statement posted on the web site’s home page</p>" + "<a href='#PrivacyPolicyLink'>Click Me</a>"});
        e.preventDefault();       
    });

});

当我单击将我发送到另一个站点的锚标记时,将出现弹出窗口。我遇到的问题是当我关闭弹出窗口时,另一个弹出窗口将立即出现。根据一些测试,似乎它将为每个锚标记创建一个新的弹出窗口,这将导致用户离开该网站。

我的问题是:如何使弹出窗口仅显示被单击的锚标记?

0 个答案:

没有答案