2014-10-03 104 views
0

我需要一個彈出窗口來打開每次頁面上,所以基本上在頁面加載。這裏是我的代碼:如何使頁面加載時自動打開彈出窗口?

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

接下來我們有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所以會彈出頁面打開時自動打開。請幫助:(

編輯:不是不喜歡我是一個巨大的小白

+0

你爲什麼不乾脆在的document.ready結束調用simplePopup秀()()? – 2014-10-03 04:23:26

回答

0

將這個代碼在JS中的index.html

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

謝謝!你幫了我很多:D – Owen 2014-10-03 04:33:15

0

jQuery's ready function文檔加載

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

之後觸發我會強烈建議使用插件像Fancybox了。這種功能很多(大多數?)瀏覽器會阻止用戶點擊頁面時發生的彈出窗口,下面是使用Fancybox和一些解決方案的問題:

How to launch jQuery Fancybox on page load?

您可以在負載啓動彈出像這樣的東西:

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

但嚴重的是,你不應該使用彈出除非你有一個真正偉大的原因。

相關問題