How To Show Modal Popup On Page Load?

crf1121359 · November 14, 2012

I have a modal popup that will open on a button click. I just need this to open on page load if possible!

I am using the code that I found here: http://dhtmlpopups.webarticles.org/movable.php

could someone please help me with this?

Thank you in advance

here is my code:

<body>
<style type='text/css'>
.dragme { cursor: move }
</style>
<script type='text/javascript'>
var ie = document.all;
var nn6 = document.getElementById &&! document.all;var isdrag = false;
var x, y;
var dobj;
function movemouse( e ) {
 if( isdrag ) {
   dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
   dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
   return false;
 }
}function selectmouse( e ) {
 var fobj	   = nn6 ? e.target : event.srcElement;
 var topelement = nn6 ? "HTML" : "BODY";
 while (fobj.tagName != topelement && fobj.className != "dragme") {
   fobj = nn6 ? fobj.parentNode : fobj.parentElement;
 }  if (fobj.className=="dragme") {
   isdrag = true;
   dobj = document.getElementById("styled_popup");
   tx = parseInt(dobj.style.left+0);
   ty = parseInt(dobj.style.top+0);
   x = nn6 ? e.clientX : event.clientX;
   y = nn6 ? e.clientY : event.clientY;
   document.onmousemove=movemouse;
   return false;
 }
}
function styledPopupClose() {
 document.getElementById("styled_popup").style.display = "none";
}document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false"); 
function fireMyPopup() {
 myPopupRelocate();
 document.getElementById("mypopup").style.display = "block";
 document.body.onscroll = myPopupRelocate;
 window.onscroll = myPopupRelocate;
}
document.body.onload = window.setTimeout("fireMyPopup()", 1500);</script>
<div id='styled_popup' name='styled_popup' style='width: 380px; height: 300px; display:none; position: absolute; top: 150px; left: 50px;'>
<table width='380' cellpadding='0' cellspacing='0' border='0'>
<tr>
<td><img height='23' width='356' src='images/x11_title.gif' class='dragme'></td>
<td><a href='javascript:styledPopupClose();'><img height='23' width='24' src='images/x11_close.gif' border='0'></a></td>
</tr>
<tr><td colspan='2' style='background: url("images/x11_body.gif") no-repeat top left; width: 380px; height: 277px;'>
Drag my window title to see me moving :-)
</td></tr>
</table>
</div><input type='submit' onclick='document.getElementById("styled_popup").style.display="block"' value=' Fire! '>

</body>
</html>

codefossa · November 14, 2012

You can do either

window.onload = myfunc;

or

window.addEventListener("load", myfunc, false);

Adam · November 14, 2012

Just to add, what you have here:

document.body.onload = window.setTimeout("fireMyPopup()", 1500);

Despite the fact that document.body.onload doesn't actually exist, you're not binding the timeout to the onload event like you may be expecting. What you're actually doing is immediately invoking the setTimeout() function and storing the returned timer ID to the onload property. That means even if the page took a further 2 seconds to load for whatever reason, fireMyPopup() would be called after 1.5, and possibly before the resources needed to render it are available.

You need to store a callback at window.onload, or as Xaotique mentioned, use the preferred window.addEventListener method.

Sign In

How To Show Modal Popup On Page Load?

Recommended Posts

crf1121359

Link to comment

Share on other sites

codefossa

Link to comment

Share on other sites

Adam

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information