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函数替换为:(从第2行中删除#modal-background）

$(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 - 对于这个简单的任务而言，它是巨大且过于复杂的。以下是其他一些插件：

Answer 4

SimpleModal完全符合您的要求。

Answer 5

您可以使用jQuery UI，它具有支持模式的对话框插件.. http://jqueryui.com/demos/dialog/#modal

或者，您可以创建一个跨越整个视口大小的div，将其不透明度设置为50％（0.5），并捕获并停止所有事件以使其成为模态。然后在它上面显示你的div ..

Answer 6

我一直在使用jQuery UI Dialog。 http://jqueryui.com/

Answer 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。

Answer 8

为此任务命名另一个插件是nyromodal，我发现它很容易使用，但如果您发现自己需要（稍后），仍会提供很多设置选项

jQuery中的简单模态div？

8 个答案: