如何在页面加载时自动打开弹出窗口?

时间:2014-10-03 04:17:51

标签: javascript jquery html

每次进入页面时都需要弹出窗口,所以基本上是在页面加载时。这是我的代码:

INDEX.HTML上的JQUERY

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);

接下来我们有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>

我需要编辑jQuery,以便在页面打开时自动打开弹出窗口。请帮忙:(

编辑:不要不喜欢。我是一个巨大的菜鸟。

3 个答案:

答案 0 :(得分:0)

加载文档后

jQuery's ready function触发

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

答案 1 :(得分:0)

我强烈建议您使用Fancybox之类的插件来实现此类功能。许多(大多数?)浏览器将阻止用户点击页面时立即发生的弹出窗口。这是使用Fancybox和一些解决方案的问题:

How to launch jQuery Fancybox on page load?

您可以使用以下内容启动加载弹出窗口:

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

但严重的是,除非你有一个非常好的理由,否则你不应该使用弹出窗口。

答案 2 :(得分:0)

将此代码放入index.html

中的js中
$(function() {
    $('.js__p_start').click();
});