Printable View
Hey,
Can anyone help me? I am working on the a project using html. This project require modal box for some business purpose. But the problem is that i don't even know how create the same this happens because i am a beginner and not having much idea about the html.
And also tell what is meant by the modalbox and for what purpose we are using it.
Please help me its urgent
Hey modal box are use to create the popup. Here are the code for creating the modalbox.
Code:<HTML>
<HEAD>
<TITLE>Modal Box</TITLE>
<SCRIPT>
var popWindow;
function PopDis(loc)
{
popWindow = window.open (loc,'popdis'
,'status=0,toolbar=0,height=450,width=510,location=0,menu=0,resizable=0,scrollbars=1');popWindow.opener = self;
}
function checkPop ()
{
if ((popWindow) && (!popWindow.closed)) {
popWindow.focus();
}
}
</SCRIPT>
</HEAD>
<BODY onFocus="checkPop();">
<table width=100% height=100%><tr><td>
<form>
<input>
</form>
<A href="javascript:PopDis('modalbox.html')">Create a Modal Box</a>
</td></tr></table>
</body>
</html>
Hello,
The modalbox can be created using the JAVASCRIPT. It is more function then the normal one. Code for Modalbox using the javascript are given below :
var maskpanel=function()
{
this.divobj;
this.show=function()
{
if(!document.getElementById("xdivmasking"))
{
var divEle=document.createElement('div');
divEle.setAttribute("id","xdivmasking");
document.body.appendChild(divEle);
var divSty=document.getElementById("xdivmasking").style;
divSty.position="absolute"; divSty.top="0px"; divSty.left="0px";
divSty.zIndex="46"; divSty.opacity=".50";divSty.backgroundColor="#000";
divSty.filter="alpha(opacity=50)";
var divFram=document.createElement('iframe');
divFram.setAttribute("id","xmaskframe");
document.body.appendChild(divFram);
divSty=document.getElementById("xmaskframe").style;
divSty.position="absolute"; divSty.top="0px"; divSty.left="0px";
divSty.zIndex="45";divSty.border="none";divSty.filter="alpha(opacity=0)";
}
this.divobj=document.getElementById("xdivmasking");
this.waitifrm=document.getElementById("xmaskframe");
var dsh=document.documentElement.scrollHeight;
var dch=document.documentElement.clientHeight;
var dsw=document.documentElement.scrollWidth;
var dcw=document.documentElement.clientWidth;
var bdh=(dsh>dch)?dsh:dch;
var bdw=(dsw>dcw)?dsw:dcw;
this.waitifrm.style.height=this.divobj.style.height=bdh+'px';
this.waitifrm.style.width=this.divobj.style.width=bdw+'px';
this.waitifrm.style.display=this.divobj.style.display="block";
};
this.hide=function()
{
this.waitifrm.style.display=this.divobj.style.display="none";
};
}
Source: logiclabz.com
Hi friends, Here i am sharing some knowledge about the Modalbox which are as follows:
Modal box are used to create the pop ups and modal dialog. It is helpful if you want to display the image which is bigger in size. It is developed by Sam Stephenson. Sam uses the pure javascript to develop the ModalBox. It involves the AJAX for loading the data.
Thanks