Results 1 to 4 of 4

Thread: How to create modal box in html?

  1. #1
    Join Date
    Nov 2009
    Posts
    1,118

    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

  2. #2
    Join Date
    Oct 2005
    Posts
    2,394

    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>

  3. #3
    Join Date
    May 2008
    Posts
    2,393

    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

  4. #4
    Join Date
    Apr 2008
    Posts
    2,010

    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

Similar Threads

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

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •