Простой модальный div в jQuery?

Ответ 1

EDIT: Это, очевидно, устарело. Поэтому, пожалуйста, обратитесь к сообщению Andrew Odri ниже.

Я не знаю, насколько вы хороши в CSS и JavaScript, но ваш запрос не должен быть таким трудным для себя.

body, html { margin:0; padding:0; }
#modalTabelGray
{
    position:absolute;
    width:100%;
    height:100%;
    background-color:#000000;
    filter:alpha(opacity=60);
    opacity:0.6;
    -moz-opacity:0.6;
    z-index:100;

    text-align:center;
    vertical-align:middle;
}

#modalDiv
{
    position:absolute;
    z-index:101;
}

Я не тестировал код, возможно, не работал, но вы получите эту идею.

Ответ 2

Это то, что я использую сам; это выглядит красиво, код прост и понятен и использует минимальные CSS и jQuery.

Вот код (и скрипка, чтобы увидеть его в действии: http://jsfiddle.net/cadkJ/125/):

HTML

<h1>Bacon ipsum dolor sit amet</h1>

<p>Magna adipisicing eu, pig ex pariatur non biltong nisi consequat do exercitation. Biltong exercitation consequat aute. Excepteur velit ribeye, et salami pariatur sed consequat enim ham. Tenderloin consequat et, in pastrami aute meatloaf beef spare ribs tri-tip beef ribs sed ut jerky strip steak. Fugiat turkey shank frankfurter pork loin pastrami.</p>

<button id="modal-launcher">Launch Modal Window</button>

<div id="modal-background"></div>
<div id="modal-content">
    <button id="modal-close">Close Modal Window</button>
</div>​

CSS

#modal-background {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    opacity: .50;
    -webkit-opacity: .5;
    -moz-opacity: .5;
    filter: alpha(opacity=50);
    z-index: 1000;
}

#modal-content {
    background-color: white;
    border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    box-shadow: 0 0 20px 0 #222;
    -webkit-box-shadow: 0 0 20px 0 #222;
    -moz-box-shadow: 0 0 20px 0 #222;
    display: none;
    height: 240px;
    left: 50%;
    margin: -120px 0 0 -160px;
    padding: 10px;
    position: fixed;
    top: 50%;
    width: 320px;
    z-index: 1000;
}

#modal-background.active, #modal-content.active {
    display: block;
}​

JQuery

$(function(){
    $("#modal-launcher, #modal-background, #modal-close").click(function() {
        $("#modal-content, #modal-background").toggleClass("active");
    });
});

Вы хотите заблокировать прокрутку?

Добавьте следующее правило CSS:

body.active { position: fixed; overflow: hidden; }

Замените функцию jQuery следующим образом: (body добавлено в строку 3)

$(function(){
    $("#modal-launcher, #modal-background, #modal-close").click(function() {
        $("body, #modal-content, #modal-background").toggleClass("active");
    });
});

Вы хотите, чтобы события закрытия событий на фоне не закрывали модальный?

Замените функцию jQuery следующим образом: (#modal-background удалено из строки 2)

$(function(){
    $("#modal-launcher, #modal-close").click(function() {
        $("#modal-content, #modal-background").toggleClass("active");
    });
});

Ответ 3

Я бы НЕ рекомендовал jQuery UI - он огромный и сверхкомплексный для этой простой задачи. Вот некоторые другие плагины:

• ThickBox
• BlockUI
• jqModal
• Facebox

Ответ 4

SimpleModal делает именно то, что вы хотите сделать.

Ответ 5

Вы можете использовать jQuery UI, который имеет плагин диалога, поддерживающий модальный. http://jqueryui.com/demos/dialog/#modal

В качестве альтернативы вы создадите div, который охватывает весь размер видового экрана, задайте его непрозрачность до 50% (0,5), а также поймайте и остановите все события, чтобы сделать его модальным. Затем отобразите свой div поверх него.

Ответ 6

Я использовал JQuery UI Dialog для этого. http://jqueryui.com/

Ответ 7

Вы можете создать простой модальный, используя чистый HTML и css, не нужно javascript и jquery, что косвенно сократит время и работу.

html-->
    <a href="#openModal">Open Modal</a>

   <div id="openModal" class="modalDialog">
   <div>    <a href="#close" title="Close" class="close">X</a>

        <h2>Modal Box</h2>

    <p>This is a sample modal box that can be created using the powers of CSS3.</p>
    <p>You could do a lot of things here like have a pop-up ad that shows when your    website loads, or create a login/register form for users.</p>
   </div>
    </div>

      css-->

   .modalDialog {
position: fixed;
font-family: Arial, Helvetica, sans-serif;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.8);
z-index: 99999;
opacity:0;
-webkit-transition: opacity 400ms ease-in;
-moz-transition: opacity 400ms ease-in;
transition: opacity 400ms ease-in;
pointer-events: none;
 }
 .modalDialog:target {
 opacity:1;
pointer-events: auto;
}
.modalDialog > div {
width: 400px;
position: relative;
margin: 10% auto;
padding: 5px 20px 13px 20px;
border-radius: 10px;
background: #fff;
background: -moz-linear-gradient(#fff, #999);
background: -webkit-linear-gradient(#fff, #999);
background: -o-linear-gradient(#fff, #999);
}
.close {
background: #606061;
color: #FFFFFF;
line-height: 25px;
position: absolute;
right: -12px;
text-align: center;
top: -10px;
width: 24px;
text-decoration: none;
font-weight: bold;
-webkit-border-radius: 12px;
-moz-border-radius: 12px;
border-radius: 12px;
-moz-box-shadow: 1px 1px 3px #000;
-webkit-box-shadow: 1px 1px 3px #000;
box-shadow: 1px 1px 3px #000;
}
.close:hover {
background: #00d9ff;
}

посетите this.

Ответ 8

Чтобы назвать другой плагин для этой задачи, nyromodal, который я считаю простым в использовании, но по-прежнему предлагает множество параметров настройки, если вы должен найти себя в этом необходимости (позже)