DIV的模式 - 的JavaScript [英] Div as modal - javascript

问题描述

我需要一个JavaScript显示在屏幕的中心与像jQuery对话框darked背景模式隐藏的div！

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

例如：

<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

推荐答案

一个简单的模式弹出格或对话框，可以通过CSS属性来完成，jQuery.The基本思想的点点很简单：
  

    1.创建一个半透明的背景及放一个div;显示它上点击你的内容页面顶部。
  

  

    2.显示您弹出的半透明调光/隐藏DIV的顶部格或警报股利。
  

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.

因此​​，我们需要三个div的：

内容（该网站的主要内容）。

藏起来（变暗内容）。

popup_box（模态div来显示）。

So we need three divs:

content(main content of the site).

hider(To dim the content).

popup_box(the modal div to display).

首先，让我们定义的CSS：

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; 

    }

重要的是，我们不是POP_UP中设置我们藏起来div的z-index的走低，我们要显示在上面popup_box。


这里谈到的Java脚本：

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");
        });

        });

和最终的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>

我已经使用jQuery的-1.4.1.min.js www.jquery.com/download和测试Firefox中的code。希望这有助于。

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

这篇关于DIV的模式 - 的JavaScript的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！