jQuery中的简单模态div？

Question

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

Answer 1

这是我自己使用的; 它看起来不错,代码简单易懂,并且使用最少的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");
    });
});

Answer 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;
}

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

Answer 3

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

• 的ThickBox
• BlockUI
• jqModal
• Facebox