Go Back   TechArena Community > Software > Software Development
Become a Member!
Forgot your username/password?
Register Tags Active Topics RSS Search Mark Forums Read

Sponsored Links



How to create modal box in html?

Software Development


Reply
 
Thread Tools Search this Thread
  #1  
Old 25-11-2009
Member
 
Join Date: Nov 2009
Posts: 1,119
How to create modal box in html?
  

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

Reply With Quote
  #2  
Old 25-11-2009
Member
 
Join Date: Oct 2005
Posts: 2,389
Re: How to create modal box in html?

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>
Reply With Quote
  #3  
Old 25-11-2009
Member
 
Join Date: May 2008
Posts: 2,382
Re: How to create modal box in 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
__________________
The FIFA Manager 2009 PC Game
Reply With Quote
  #4  
Old 25-11-2009
Member
 
Join Date: Apr 2008
Posts: 2,000
Re: How to create modal box in html?

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
Reply With Quote
Reply

  TechArena Community > Software > Software Development
Tags: , , , , , , ,



Thread Tools Search this Thread
Search this Thread:

Advanced Search


Similar Threads for: "How to create modal box in html?"
Thread Thread Starter Forum Replies Last Post
How to use javascript to create HTML and CSS KennedII Software Development 5 22-02-2010 11:10 PM
How can I create a modal dialog box in Java? super soaker Software Development 4 16-02-2010 12:16 AM
How to create and send HTML email Zool Software Development 3 24-11-2009 09:48 AM
How to create Tab in HTML RasMus Software Development 3 30-07-2009 11:30 AM
How to create Tables in HTML ? Sudra Software Development 2 21-02-2009 08:01 AM


All times are GMT +5.5. The time now is 05:27 PM.