jquery - jQuery 中的简单模式 div？

Question

我已经尝试了几乎所有我能在网上找到的 jQuery Modal 插件，但它们对于我需要的东西来说都太笨重了。我不需要所有花哨的功能，我希望能够打开一个 div 并让页面的背景像下面的照片一样变成透明的灰色，并将我的 div 放在它上面，这就是我需要做的所以我想写一些 jQuery 来做这个而不是使用笨重的插件。有没有人有可以完成这项任务的小代码？透明背景是图像还是 CSS？

Answer 1

这是我自己用的；它看起来不错，代码简单易懂，使用最少的 CSS 和 jQuery。

这是代码(还有一个 fiddle 可以看到它的实际效果: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 函数替换为:(添加到第 3 行的 body)

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