Proinsurer.com.ua
Thursday, 11 January 2018 21:28

How to show popup after page load?

Written by
Rate this item
(0 votes)

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('hide')" />
            </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.

Read 283 times Last modified on Thursday, 11 January 2018 22:31
Tagged under
Alex

Experienced Web Developer with a demonstrated history of working in the information technology and services industry.

Skilled in User Experience, Magento, Joomla, WordPress and IT Services.

Latest from Alex

More in this category: « Setting up Sublime Text for Angular Development
back to top