Tuesday, December 30, 2008

Creating modal popup in HTML 4 using CSS and Javascript

Hi all,
Creating a modal popup for asp.net users is always easy, its simply a modal panel, modal popup extender of asp.net ajax and all is done. but creating the modal popup that way will not work properly when you are having a following doctype:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

and that's why we are looking into a simple method which uses javascript, and a tricky css to show the same kinda popup to work with the above doctype also.
here is how we can do so.
(1) add following css in your css or html document's style tag:
.graydiv
{
position: absolute;
background-color: #5B5B5B;
left: 0px;
top: 0px;
z-index: 10000;
display: none;
}

.ModalBackground
{
background-color: black;
filter: alpha(opacity=70);
opacity: 0.7;
}


(2) add following html markup at the end of your html document:
<div id="divg" class="ModalBackground graydiv">
</div>
<div id="divSignin" style="border: '1px soild green'; display: none; z-index: 100002;
width: 550px; position: absolute;">
<div style="text-align:right;height:100px;width:100px;background-color:White;border:solid 1px lightyellow">
This is a popup;
<input type="button" value="Close Me" onclick="closePopup();" />
</div>

</div>


(3) add following javascript in the script tag of your document or in your javascript file:
function closePopup()
{
document.getElementById("divSignin").style.display="none";    
objDiv = document.getElementById("divg");
objDiv.style.display = "none"; 
return false;
}
function showPopup()
{
try
{  
document.getElementById("divSignin").style.display="block";    
objDiv = document.getElementById("divg");
objDiv.style.display = "block"; 
objDiv.style.width = document.body.scrollWidth;
objDiv.style.height= document.body.scrollHeight;         
fnSetDivSigninLeft("divSignin");        
}
catch(e)
{
alert(e);
}
return false   
}
function fnSetDivSigninLeft(oElement)
{
var DivWidth = parseInt(document.getElementById(oElement).offsetWidth,10)
var DivHeight = parseInt(document.getElementById(oElement).offsetHeight,10)
document.getElementById(oElement).style.left = (document.body.offsetWidth / 2) - (DivWidth / 2)+200;
document.getElementById(oElement).style.top = (document.body.offsetHeight / 2) -  ( DivHeight / 2);

return false;     
}


and that's it, your popup is ready, the last step is to call this popup in your control and call its showPopup() event. here is a sample input button that calls the popup.

<input type="button" value="Show Popup" onclick="showPopup();" />


Note: If you want to show multiple popups, you can extend this code.
Note: You can use any color for modal background, for doing so, modify the change background color property of the ModalBackground class and try using the code.

Another simple way to implement this thing is to use JQuery Plugin but i don't know if they work well with HTML 4 or not. This one is a simple nice and clean approach to deal with modal poups.

happy coding :)

10 comments:

  1. Simple and to the point. Love it. Thanks.

    Osiris

    ReplyDelete
  2. Hello,
    I am working in DNN 4.9.2.
    I have used this in my module.
    Its working fine in IE7 but fails in mozilla firefox.

    When I view this in Mozila browser.
    CSS for divg is not aplied there is no black background and all links are clickable from my page.
    divSignin is displayed at the bottom.
    Any guess How to resolve this ?

    ReplyDelete
  3. Hey,
    I used the same code in DNN 4.5.x, may be something is missing from your side. Checkout z-index, -moz-opacity etc using firebug and you will probably get the fix, I will try to deploy it on 4.9.2 and tell you if I can help you with this fix.

    Thanks for pointing to the bug.

    ReplyDelete
  4. i have used your techinique and its working fine on dn4.x versions but not in dnn4.9 version pop is not coming please help me asap

    ReplyDelete
  5. Hey, Thanks for reporting the problem. you are second to report this, I will look into the problem soon and will post a fix once I'm done.
    Thanks again for posting the bug.

    ReplyDelete
  6. the code works perfectly on DNN 04.09.02

    thanks

    ReplyDelete
  7. Hi,

    This technique is superup and I have used in my previous projects. Now I am working on DNN 5.1 anf this modal pop fails in Mozila. It works fine in IE.

    Please help.....

    ReplyDelete
  8. Thank you all for nice responses.

    Please read the title carefully. This technique is specially for creating a modal popup in html 4 doctype. Dotnetnuke 5.x is no longer using that doctype and the code may not work.

    Please keep in touch, I am going to add a list of supported doctype and unsupported doctype into this post.

    Thanks again for all the responses

    ReplyDelete
  9. i need to click twice on asp.net linkbutton to show popup plz help
    its working when i try to use your example but i have to click twice when using asp.net controls

    ReplyDelete

Please add your valuable comments about this post if it helped you. Thanks