jQuery 中的简单模态 div？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/2101359/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Simple modal div in jQuery?
提问by JasonDavis
I have tried almost all of the jQuery Modal plugins I can find on the net but they are all much to bulky for what I need. I don't need all the fancy features, I want to be able to open a div and have the background of the page go transparent grey like the photo below and have my div be on top of it, that is all I need to do so I would like to write some jQuery to do this instead of using a bulky plugin. Does anyone have any small code that can do this task? Is the transparent background an image or just CSS?
我已经尝试了几乎所有可以在网上找到的 jQuery Modal 插件，但它们对于我需要的东西来说都太大了。我不需要所有花哨的功能，我希望能够打开一个 div 并使页面的背景像下面的照片一样变成透明的灰色，并将我的 div 放在上面，这就是我需要做的所以我想写一些 jQuery 来做到这一点，而不是使用笨重的插件。有没有人有任何可以完成此任务的小代码？透明背景是图像还是CSS？
回答by Andrew Odri
This is what I use myself; it looks nice, the code is simple and easy to understand, and uses minimal CSS and jQuery.
这是我自己用的；它看起来不错，代码简单易懂，并且使用最少的 CSS 和 jQuery。
Here is the code (And a fiddle to see it in action: http://jsfiddle.net/cadkJ/125/):
这是代码（还有一个可以看到它在行动的小提琴：http: //jsfiddle.net/cadkJ/125/）：
HTML
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
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
jQuery
$(function(){
$("#modal-launcher, #modal-background, #modal-close").click(function() {
$("#modal-content, #modal-background").toggleClass("active");
});
});
Do you want to lock scrolling?
你想锁定滚动吗？
Add the following CSS rule:
添加以下 CSS 规则：
body.active { position: fixed; overflow: hidden; }
Replace the jQuery function with: (bodyadded to line 3)
将 jQuery 函数替换为：（body添加到第 3 行）
$(function(){
$("#modal-launcher, #modal-background, #modal-close").click(function() {
$("body, #modal-content, #modal-background").toggleClass("active");
});
});
Do you want to prevent click events on the background from closing the modal?
是否要防止后台点击事件关闭模态？
Replace the jQuery function with: (#modal-backgroundremoved from line 2)
将 jQuery 函数替换为：（#modal-background从第 2 行中删除）
$(function(){
$("#modal-launcher, #modal-close").click(function() {
$("#modal-content, #modal-background").toggleClass("active");
});
});
回答by はると
EDIT: This is obviously outdated. So please refer to Andrew Odri post below.
编辑：这显然已经过时了。所以请参考下面的 Andrew Odri 帖子。
I don't know how good you are in CSS and JavaScript, but your request shouldn't be that hard to do yourself.
我不知道你在 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;
}
I haven't tested the code, might not work, but you'll get the idea.
我还没有测试过代码，可能不起作用，但你会明白的。
回答by Kordonme
回答by David Robbins
SimpleModaldoes precisely what you want to do.
SimpleModal正是您想要做的。
回答by Gabriele Petrioli
You can use jQuery UI which has a dialog plugin that supports modal .. http://jqueryui.com/demos/dialog/#modal
您可以使用具有支持模态对话框插件的 jQuery UI .. http://jqueryui.com/demos/dialog/#modal
Alternatively you would create a div that spans the whole viewport in size, set its opacity to 50% (0.5) and also catch and stop all events to make it modal. Then display your div on top of it ..
或者，您可以创建一个跨越整个视口大小的 div，将其不透明度设置为 50% (0.5)，并捕获并停止所有事件以使其成为模态。然后在它上面显示你的 div ..
回答by kumaresan
You can create a simple modal using pure HTML and css,no need of javascript and jquery,which will indirectly reduce time and work.
您可以使用纯 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;
}
visit this.
访问这个。
回答by atfergs
I've been using the jQuery UI Dialog for this. http://jqueryui.com/
为此，我一直在使用 jQuery UI 对话框。 http://jqueryui.com/
