Якорный тег открывает несколько всплывающих окон - PullRequest
Новая
       49

Якорный тег открывает несколько всплывающих окон

0 голосов
/ 23 февраля 2019

Я создаю всплывающее окно, которое будет отображать всплывающее окно, уведомляющее пользователя, что он покидает веб-сайт, если выбранный тег привязки не является внутренней ссылкой.

Мне удалось найти Пример в сети , который предоставляет учебное пособие по созданию модального 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();       
    });

});

Когда я нажимаю на тег привязки, который отправит меня на другой сайт, появится всплывающее окно.Проблема, с которой я сталкиваюсь, заключается в том, что когда я закрываю всплывающее окно, сразу после этого появляется другое всплывающее окно.Судя по результатам некоторого тестирования, создается впечатление, что для каждого тега привязки будет создаваться новое всплывающее окно, в результате чего пользователь покидает веб-сайт.

У меня такой вопрос: как сделать так, чтобы всплывающее окно отображалось только для привязки?тег, по которому щелкают?

...