在做web前端的时候，有些时候会涉及到模态层，在此提供一种实现思路，希望对大家有用。先贴效果吧：
模态层效果
下面说说在写模态层的时候的思路：通过可配置的参数width，height，title以及content用来设定弹出的信息框显示的内容，并通过可配置参数container用来设定模态层显示的区域。思路很简单，主要是一些css样式和js处理，详见源码：
modal.css
html,body{ font-size: 12px; font-family: 微软雅黑;}.modal{ position: absolute; top:0px; left: 0px; border: 1px solid #000; background: #555; opacity: 0.4;}.infowin{ border: 1px solid #777777; background: #fff; box-shadow: 0 0 0.75em #777777; -moz-box-shadow: 0 0 0.75em #777777; -webkit-box-shadow: 0 0 0.75em #777777; -o-box-shadow: 0 0 0.75em #777777; border-radius: 5px; -moz-border-radius: 5px; -webkit-border-radius: 5px; -o-border-radius: 5px;} .title{ border-bottom: 1px solid #777777;}.title_content{ padding: 5px; padding-left: 10px; font-size: 14px; font-family: 微软雅黑; font-weight: bold;}.close{ background: url(close.png) no-repeat; width: 25px; height: 25px; float: right;}.close:hover{ cursor: pointer;}.content{ padding-left: 10px; padding-top: 10px;}
jquery.modal.js
(function($){ $.fn.modalinfowindow = function(options){ var defaults = {}; var options = $.extend(defaults, options); var container=$(this); var width=options.width, height=options.height, title=options.title, content=options.content; //模态层容器 var modal=$(
); modal.css(width,100%); modal.css(height,100%); //模态层 var modal_div=$(
); modal_div.css(width,100%); modal_div.css(height,100%); //信息框 var infowin=$(
); infowin.css(width,width+px); infowin.css(height,height+px); infowin.css(position,absolute); infowin.css(top,(container.height()-height)/2+px); infowin.css(left,(container.width()-width)/2+px); //标题 var infowin_title=$(
); var infowin_title_close=$(
) infowin_title_close.on(click,function(){ console.log(close modal!); modal.hide(); }); var infowin_title_content=$(
) infowin_title_content.append(title); infowin_title.append(infowin_title_close); infowin_title.append(infowin_title_content); //内容 var infowin_content=$(
); infowin_content.append(content); //信息框添加标题和内容 infowin.append(infowin_title); infowin.append(infowin_content); //模态层容器添加模态层和信息框 modal.append(modal_div); modal.append(infowin); //将模态层添加到容器 container.append(modal); }})(jquery);
将之封装成一个jquery插件，提高可重用性，在页面短的调用方式如下：
弹出窗口

页面端涉及到的样式：

调用modal插件：

其中，content可为html代码。
源码下载