Простой модальный div в jQuery?
Я пробовал почти все плагины jQuery Modal, которые я могу найти в сети, но они все очень громоздки для того, что мне нужно. Мне не нужны все причудливые функции, я хочу, чтобы можно было открыть div, и чтобы фон страницы проходил прозрачно-серый, как на фотографии ниже, и мой div должен быть на вершине, вот и все, что мне нужно сделать поэтому я хотел бы написать некоторый jQuery, чтобы сделать это, а не использовать громоздкий плагин. У кого-нибудь есть небольшой код, который может выполнить эту задачу? Является ли прозрачным фоном изображение или просто CSS?
Ответы
Ответ 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 - он огромный и сверхкомплексный для этой простой задачи. Вот некоторые другие плагины:
Ответ 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, который я считаю простым в использовании, но по-прежнему предлагает множество параметров настройки, если вы должен найти себя в этом необходимости (позже)