a-simple-modal，一个更为简单的modal window。

最新推荐文章于 2025-02-10 16:23:46 发布

转载最新推荐文章于 2025-02-10 16:23:46 发布 · 952 阅读

文章标签：

#function #stylesheet #filter #null #class #xhtml

javascript 专栏收录该内容

6 篇文章

订阅专栏

本文提供了一个易于理解的简易modal窗口实例，包括JS文件、CSS样式及HTML代码，旨在帮助开发者快速掌握modal窗口的实现方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

还是觉得上次的jmodal的例子不够简单，于是继续查找有关modal window的例子，下面是一个个人认为十分好理解的例子：

http://deseloper.org/read/2008/04/a-simple-modal/

（都被直接叫做simple modal了）

下面是代码：

1.最重要的js文件（暂定名为smodal.js）

// JavaScript Document var modalWindow = { parent:"body", windowId:null, content:null, width:null, height:null, close:function() { $(".modal-window").remove(); $(".modal-overlay").remove(); }, open:function() { var modal = ""; modal += "<div class=/"modal-overlay/"></div>"; modal += "<div id=/"" + this.windowId + "/" class=/"modal-window/" style="/" mce_style="/""width:" + this.width + "px; height:" + this.height + "px; margin-top:-" + (this.height / 2) + "px; margin-left:-" + (this.width / 2) + "px;/">"; modal += this.content; modal += "</div>"; $(this.parent).append(modal); $(".modal-window").append("<a class=/"close-window/"></a>"); $(".close-window").click(function(){modalWindow.close();}); $(".modal-overlay").click(function(){modalWindow.close();}); } };

2.CSS文件（暂定名为smodal.css）

@charset "utf-8"; /* CSS Document */ .modal-overlay { position:fixed; top:0; right:0; bottom:0; left:0; height:100%; width:100%; margin:0; padding:0; background:#fff; opacity:.75; filter: alpha(opacity=75); -moz-opacity: 0.75; z-index:101; } .modal-window { position:fixed; top:50%; left:50%; margin:0; padding:0; z-index:102; } .close-window { position:absolute; width:500px; height:500px; right:8px; top:8px; background:transparent url('background.jpg') no-repeat scroll right top; text-indent:-99999px; overflow:hidden; cursor:pointer; opacity:.5; filter: alpha(opacity=50); -moz-opacity: 0.5; } .close-window:hover { opacity:.99; filter: alpha(opacity=99); -moz-opacity: 0.99; }

（注：此处注意修改close-window中的backgroud属性就能看出一些效果了）

3.当然是html文件了

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <link rel="Stylesheet" type="text/css" href="smodal.css"/> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script> <script type="text/javascript" src="smodal.js" ></script> <script type="text/javascript"> var openMyModal = function(source) { modalWindow.windowId = "myModal"; modalWindow.width = 480; modalWindow.height = 405; modalWindow.content = "<iframe width='480' height='405' frameborder='0' scrolling='no' allowtransparency='true' src="" + source + "" mce_src="" + source + ""></iframe>"; modalWindow.open(); }; </script> </head> <body> <a href="/example/modal-simple/modal.html" mce_href="example/modal-simple/modal.html" target="_blank" onclick="openMyModal('/example/modal-simple/modal.html'); return false;">Click here to open</a> </body>

个人感觉这个很好理解，应该不用注释的。效果也不错。