jQuery中的简单模态div？
我已经尝试了几乎所有我可以在网上找到的jQuery Modal插件，但它们对于我需要的东西来说都很笨重。 我不需要所有花哨的function，我希望能够打开一个div并让页面的背景像下面的照片一样透明灰色，让我的div在它上面，这就是我需要做的全部所以我想写一些jQuery来做这个，而不是使用一个庞大的插件。 有没有人有任何可以执行此任务的小代码？ 透明背景是图像还是CSS？
编辑：这显然已经过时了。 所以请参考下面的Andrew Odripost。
我不知道你在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; } 我没有测试过代码，可能无法正常工作，但你会明白这个想法。
这是我自己使用的; 它看起来不错，代码简单易懂，并且使用最少的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.
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"); }); });
我不推荐使用jQuery UI – 对于这个简单的任务来说，它是巨大且过于复杂的。 以下是其他一些插件：
- 的ThickBox
- BlockUI
- jqModal
- Facebox
SimpleModal正是您想要做的。
你可以使用jQuery UI，它有一个支持模态的对话框插件.. http://jqueryui.com/demos/dialog/#modal
或者，您可以创建一个跨越整个视口大小的div，将其不透明度设置为50％（0.5），并捕获并停止所有事件以使其成为模态。 然后在它上面显示你的div ..
我一直在使用jQuery UI Dialog。 http://jqueryui.com/
您可以使用纯HTML和CSS创建一个简单的模式，不需要javascript和jquery，这将间接减少时间和工作。
html--> Open Modal X Modal Box
This is a sample modal box that can be created using the powers of CSS3.
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.
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; }
访问这个 。
为此任务命名另一个插件是nyromodal ，我发现它很容易使用，但如果你发现自己需要它（后来）仍然提供了很多设置选项