找了許久，原本是想要找像原價屋在進入估價系統時就會出現的公告與廣告頁面，原來這東西叫 On Page load Pop up，筆記與練一下以便之後運用。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 | <div class="container"> <div class="row text-center"> <h2>OnPage Load Script</h2> <h3>Please like and comment if you love this</h3> <p>Also visit my website <a href="http://webenlance.com/">Webenlance.com</a></p> </div> </div> <!-- use this for popup--> <div id="boxes"> <div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">Webenlance <div id="lorem"> <p> Webenlance was established in November 2010 at new delhi, India. The Webenlance is a Digital Commerce company. The Founder of Comapany Have More than 6 + Years of experience in this industries. We have served over 100+ clients all over the India and earned their trust & satisfaction in the quality work we delivered them. We specialize in projects that combine creativity and innovation with the highest levels of quality with intelligent ... </p> </div> <div id="popupfoot"> <a href="http://webenlance.com/" class="close agree">I agree</a> | <a class="agree"style="color:red;" href="http://webenlance.com/">I do not agree</a> </div> </div> <div style="width: 1478px; font-size: 32pt; color:white; height: 602px; display: none; opacity: 0.8;" id="mask"></div> </div> <!-- use this for popup--> |
1 2 3 4 5 6 7 8 9 10 11 | <!-- use this for popup--> <div id="boxes"> <div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">Webenlance <div id="lorem"> <p> Webenlance was established in November 2010 at new delhi, India. The Webenlance is a Digital Commerce company. The Founder of Comapany Have More than 6 + Years of experience in this industries. We have served over 100+ clients all over the India and earned their trust & satisfaction in the quality work we delivered them. We specialize in projects that combine creativity and innovation with the highest levels of quality with intelligent ... </p> </div> <div id="popupfoot"> <a href="http://webenlance.com/" class="close agree">I agree</a> | <a class="agree"style="color:red;" href="http://webenlance.com/">I do not agree</a> </div> </div> <div style="width: 1478px; font-size: 32pt; color:white; height: 602px; display: none; opacity: 0.8;" id="mask"></div> </div> <!-- use this for popup--> |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | $(document).ready(function() { var id = '#dialog'; //Get the screen height and width var maskHeight = $(document).height(); var maskWidth = $(window).width(); //Set heigth and width to mask to fill up the whole screen $('#mask').css({'width':maskWidth,'height':maskHeight}); //transition effect $('#mask').fadeIn(500); $('#mask').fadeTo("slow",0.9); //Get the window height and width var winH = $(window).height(); var winW = $(window).width(); //Set the popup window to center $(id).css('top', winH/2-$(id).height()/2); $(id).css('left', winW/2-$(id).width()/2); //transition effect $(id).fadeIn(2000); //if close button is clicked $('.window .close').click(function (e) { //Cancel the link behavior e.preventDefault(); $('#mask').hide(); $('.window').hide(); }); //if mask is clicked $('#mask').click(function () { $(this).hide(); $('.window').hide(); }); }); |
See the Pen 頁面開啟公告_On Page load Pop up by Jimmy_Wu (@Jimmy_Wu) on CodePen.
js bin展示開新視窗