How to show popup after page load?
For example - if I want to show popup after page load it appears plus how to code it as like it appears after 1 second of page load.
/* Popup messages */ #popup-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,.6); z-index: 1001; } #popup { width: 1017px; height: 581px; background: url("/images/system/domotex-2018.jpg"); text-align: center; color: #fff; border: 1px solid #888; box-shadow: #64686e 0px 0px 3px 3px; -moz-box-shadow: #64686e 0px 0px 3px 3px; -webkit-box-shadow: #64686e 0px 0px 3px 3px; position: relative; top: 10%; margin: 0 auto; } /* Popup's styles */ #popup div.bg { background: rgba(38, 38, 38, 0.84) none repeat scroll 0 0; margin: 30px auto 0; width: 487px; } #popup h2 { color: #fff; padding: 25px; margin-top: 15px; } #popup p { padding: 0 0 10px; } #popup input { background: rgba(91, 91, 91, 0.39) none repeat scroll 0 0; border: medium none; color: #777; height: 32px; padding: 5px; position: absolute; right: 0; top: 0; width: 32px; }
<!-- код из примера Parketdoska.ua --> <div id="popup-wrapper" style="display: none;"> <div id="popup"> <div class="bg"> <h2>Мы поехали на выставку за новыми идеями</h2> <p>Вернемся 20 января а пока нас нет, работает шоу-рум на Петровке: Проспект <a href="https://www.google.com/maps/place/Woodheart/@50.4883013,30.4881845,17z/data=!4m13!1m7!3m6!1s0x40d4cdfba7a3d89b:0x2fc7206de12d620c!2sStepana+Bandery+Avenue,+8,+Kyiv,+02000!3b1!8m2!3d50.4882877!4d30.4932914!3m4!1s0x0:0x4f66d595ec4c3f7e!8m2!3d50.488853!4d30.489272" target="_blank">Степана Бандеры, 8</a> Звоните 066 110 29 62, 096 550 03 08</p> </div> <input type="submit" name="submit" value="X" onClick="PopUp('/')" /> </div> </div>
And js code:
<script> /* Show Popup after 1 sec */ function PopUp(hideOrshow) { if (hideOrshow == 'hide') document.getElementById('popup-wrapper').style.display = "none"; else document.getElementById('popup-wrapper').removeAttribute('style'); } window.onload = function () { setTimeout(function () { PopUp('show'); }, 1000); } </script>
It is simple! I hightlight code whatever you can change. If u can any cmments - welcome.
Well done.
Leave a comment
Make sure you enter all the required information, indicated by an asterisk (*). HTML code is not allowed.