简体   繁体   中英

How To Make Popup Open Automatically On Page Load?

I need a popup to open every time you go on the page, so basically on page load. Here's my code:

JQUERY ON INDEX.HTML

var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-36251023-1']);
_gaq.push(['_trackPageview']);

(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
 ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-     analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();

JAVASCRIPT

// Блог Никиты Лебедева, nazz.me/simple-jquery-popup
(function($) {
    $.fn.simplePopup = function() {

        var simplePopup = {

            // Обработчики
            initialize: function(self) {

                var popup = $(".js__popup");
                var body = $(".js__p_body");
                var close = $(".js__p_close");
                var hash = "#popup";

                var string = self[0].className;
                var name = string.replace("js__p_", "");

                // Переопределим переменные, если есть дополнительный попап
                if ( !(name === "start") ) {
                    name = name.replace("_start", "_popup");
                    popup = $(".js__" + name);
                    name = name.replace("_", "-");
                    hash = "#" + name;
                };

                // Вызов при клике
                self.on("click", function() {
                    simplePopup.show(popup, body, hash);
                    return false;
                });

                $(window).on("load", function() {
                    simplePopup.hash(popup, body, hash);
                });

                // Закрытие
                body.on("click", function() {
                    simplePopup.hide(popup, body);
                });

                close.on("click", function() {
                    simplePopup.hide(popup, body);
                    return false;
                });

                // Закрытие по кнопке esc
                $(window).keyup(function(e) {
                    if (e.keyCode === 27) {
                        simplePopup.hide(popup, body);
                    }
                });

            },

            // Метод центрирования
            centering: function(self) {
                var marginLeft = -self.width()/2;
                return self.css("margin-left", marginLeft);
            },

            // Общая функция показа
            show: function(popup, body, hash) {
                simplePopup.centering(popup);
                body.removeClass("js__fadeout");
                popup.removeClass("js__slide_top");
                window.location.hash = hash;
            },

            // Общая функция скрытия
            hide: function(popup, body) {
                popup.addClass("js__slide_top");
                body.addClass("js__fadeout");
                window.location.hash = "#";
            },

            // Мониторим хэш в урле
            hash: function(popup, body, hash) {
                if (window.location.hash === hash) {
                    simplePopup.show(popup, body, hash);
                }
            }

        };

        // Циклом ищем что вызвано
        return this.each(function() {
            var self = $(this);
            simplePopup.initialize(self);
        });

    };
})(jQuery);

Next we have the HTML

<div class="p_anch"> <a href="#" class="js__p_start">Click Here,</a></div>
<div class="p_body js__p_body js__fadeout"></div>
<div class="popup js__popup js__slide_top"> <a href="#" class="p_close js__p_close" title="Close">    </a>
<div class="p_content">jQueryScript.Net Demo<br>
</div>
</div>

I need to edit the jQuery so the popup will open automatically when the page opens. Please help :(

EDIT: Don't dislike. I'm a huge noob.

jQuery's ready function triggers after the document is loaded

// A $( document ).ready() block.
$( document ).ready(function() {
    console.log( "show your popup here!" );
});

I would strongly recommend using a plugin like Fancybox for this sort of functionality. Many (most?) browsers are going to block popups that happen as soon as the user hits the page. Here's a question using Fancybox and some solutions:

How to launch jQuery Fancybox on page load?

You can launch a popup on load with something like this:

$(function() {
  window.open ("http://jsc.simfatic-solutions.com","mywindow");
});

But seriously, you shouldn't use a popup unless you've got a really great reason.

Put this code in js in index.html

$(function() {
    $('.js__p_start').click();
});

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM