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

1> Andrew Odri..：

---

这是我自己使用的; 它看起来不错,代码简单易懂,并且使用最少的CSS和jQuery.

这是代码(并且在行动中看到它的小提琴:http://jsfiddle.net/cadkJ/125/):

HTML

Bacon ipsum dolor sit amet

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.

Launch Modal Window



    Close Modal Window
?

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

2> はると..：

---

编辑:这显然已经过时了.所以请参考下面的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;
}

我没有测试过代码,可能无法正常工作,但你会明白这个想法.

---

实际上我只有很好的创建自己的经验,它们变得像我想要的那样轻量级,我相信它们不会与我可能使用的其他库冲突.但我仍然同意你的观点,互联网上有很多好的插件,当你自己创建它们时,事情会变得很难看.

3> Kordonme..：

---

我不推荐使用jQuery UI - 对于这个简单的任务来说,它是巨大且过于复杂的.以下是其他一些插件:

的ThickBox

BlockUI

jqModal

Facebox