Popup on webpage

Question

I have a set of html webpages for my website. The website has been fully completed except for the popup, which is supposed to be loaded automatically when a user accesses the homepage of the website. This popup, which will be loaded in the middle of the homepage, will contain an image (900x400) with a close button on the top left of the popup.

I have tried numerous sources and many of these web resources require the user to click on the link for the popup to appear. I am not looking for the user to click to have the popup displayed. I want the user to be automatically shown the popup when the user accesses the homepage.

May someone please assist me through this issue?

Answer 1

You could add a div with the CSS position:absolute , and create a close button for it:

 document.addEventListener('DOMContentLoaded', function() { document.querySelector('a.close').addEventListener('click', function(e) { document.getElementById('language-popup').style.display = 'none'; }); }); 

 #language-popup { background-color: #AAAAFF; font-family: Verdana; padding: 12px; border-radius: 10px; width: 900px; height: 400px; position: absolute; top: 50px; } #language-popup h3 { text-align: center; } #language-popup ul { list-style-type: none; } #language-popup a { text-decoration: none; color: black; } #language-popup a:hover { text-decoration: underline; } #language-popup .close { float: right; } #language-popup .close:hover { text-decoration: none; } #language-popup .close:after { content: '✖'; cursor: pointer; } 

 <div id="language-popup"> <a class='close'></a> <h3>Popup title</h3> <section> Your popup content goes here! </section> </div> 

Answer 2

You can use jQuery UI Dialog. It can be shown anytime, onclick as well as onload of document. To implement it in your webpage, do this :

HTML:

<div id = "dialog">
<p>Some Content Here...</p>
</div>

jQuery:

$(document).ready(function(){
 $('#dialog').dialog();
});

Working demo from jQueryUI.

Make sure that you insert jQuery, jQueryUI and jQueryUI.CSS in your markup by placing these tags in your markup:

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>