Div как модальный - JavaScript - PullRequest
Новая
       15

Div как модальный - JavaScript

1 голос
/ 21 декабря 2010

Мне нужен JavaScript, который показывает скрытый div по центру экрана как модальный с затемненным фоном, как в диалоге jquery!

пример: 

<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>

Кто может помочь?Спасибо

Ответы [ 2 ]

5 голосов
/ 09 сентября 2014

Простое модальное всплывающее окно div или диалоговое окно можно сделать с помощью свойств CSS и небольшого количества jQuery. Основная идея проста:

1. Создайте div с полупрозрачным фоном и покажите его поверх вашего контентастраница по клику. 2. Покажите всплывающий элемент div или оповещения сверху полупрозрачного элемента затемнения / скрытия.

Итак, нам нужно три элемента div:

content (основной контент сайта). hider (для затемнения содержимого). popup_box (модальный div для отображения).

Сначала давайте определим 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; 

    }

Важно, чтобы мы установили z-индекс нашего hider div ниже, чем поле pop_upкак мы хотим показать popup_box сверху.Вот сценарий Java: 

        $(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.Надеюсь, это поможет.

2 голосов
/ 21 декабря 2010

Вот пример jfiddle модального наложения с использованием jQuery.

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

Надеюсь, это поможет вам начать работу.

Bob

...