3

I need a JavaScript that shows hidden div on the center of the screen as modal with darked background like jquery dialog!

example:

<div id='divToShow' style='display:none'>

Here is the content of the div that should be shown as modal on the center of the page!

</div>

Who can help? Thanks

ihorko
  • 6,855
  • 25
  • 77
  • 116

2 Answers2

7

A simple modal pop up div or dialog box can be done by CSS properties and little bit of jQuery.The basic idea is simple:

  • 1. Create a div with semi transparent background & show it on top of your content page on click.
  • 2. Show your pop up div or alert div on top of the semi transparent dimming/hiding div.

    • So we need three divs:

  • content(main content of the site).
  • hider(To dim the content).
  • popup_box(the modal div to display).

    First let us define the CSS:

        #hider
    {
        position:absolute;
        top: 0%;
        left: 0%;
        width:1600px;
        height:2000px;
        margin-top: -800px; /*set to a negative number 1/2 of your height*/
        margin-left: -500px; /*set to a negative number 1/2 of your width*/
        /*
        z- index must be lower than pop up box
       */
        z-index: 99;
       background-color:Black;
       //for transparency
       opacity:0.6;
    }

    #popup_box  
    {

    position:absolute;
        top: 50%;
        left: 50%;
        width:10em;
        height:10em;
        margin-top: -5em; /*set to a negative number 1/2 of your height*/
        margin-left: -5em; /*set to a negative number 1/2 of your width*/
        border: 1px solid #ccc;
        border:  2px solid black;
        z-index:100; 

    }

    It is important that we set our hider div's z-index lower than pop_up box as we want to show popup_box on top.
    Here comes the java Script:

            $(document).ready(function () {
        //hide hider and popup_box
        $("#hider").hide();
        $("#popup_box").hide();

        //on click show the hider div and the message
        $("#showpopup").click(function () {
            $("#hider").fadeIn("slow");
            $('#popup_box').fadeIn("slow");
        });
        //on click hide the message and the
        $("#buttonClose").click(function () {

            $("#hider").fadeOut("slow");
            $('#popup_box').fadeOut("slow");
        });

        });

    And finally the HTML:

    <div id="hider"></div>
<div id="popup_box">
    Message<br />
    <a id="buttonClose">Close</a>
</div>    
<div id="content">
    Page's main content.<br />
    <a id="showpopup">ClickMe</a>
</div>

    I have used jquery-1.4.1.min.js www.jquery.com/download and tested the code in Firefox. Hope this helps.

    • mirmdasif
    • 6,014
    • 2
    • 22
    • 28
    4

    Here is a jfiddle example of a modal overlay using jQuery.

    http://jsfiddle.net/r77K8/1/

    Hope this gets you started.

    Bob

    rcravens
    • 8,320
    • 2
    • 33
    • 26
    • Nothing to understand, what and where should I dowload to use that examples? – ihorko Dec 21 '10 at 18:50
    • 1
      This is an example with a hidden div that is shown when you click the link. This example uses jQuery. All the code (html, css, javascript) is in the example. – rcravens Dec 21 '10 at 20:12
    • Hi, that is something like i need, but how can I change position of modal window there? – ihorko Dec 22 '10 at 14:34
    • Here is an update with the ability to position the modal div. http://jsfiddle.net/r77K8/4/ – rcravens Dec 22 '10 at 16:22
    • Not sure if this is a standard technique/approach but I like it a lot. Thanks rcravens! – deprecated May 27 '13 at 10:18