js+css实现模态层效果

在做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=$("<div id='modal'></div>");
modal.css("width","100%");
modal.css("height","100%");
//模态层
var modal_div=$("<div class='modal'></div>");
modal_div.css("width","100%");
modal_div.css("height","100%");
//信息框
var infoWin=$("<div class='infowin'></div>");
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=$("<div class='title'></div>");
var infoWin_title_close=$("<div class='close'></div>")
infoWin_title_close.on("click",function(){
console.log("Close Modal!");
modal.hide();
});
var infoWin_title_content=$("<div class='title_content'></div>")
infoWin_title_content.append(title);
infoWin_title.append(infoWin_title_close);
infoWin_title.append(infoWin_title_content);
//内容
var infoWin_content=$("<div class='content'></div>");
infoWin_content.append(content);
//信息框添加标题和内容
infoWin.append(infoWin_title);
infoWin.append(infoWin_content);
//模态层容器添加模态层和信息框
modal.append(modal_div);
modal.append(infoWin);
//将模态层添加到容器
container.append(modal);
}
})(jQuery);

将之封装成一个jquery插件，提高可重用性，在页面短的调用方式如下：

<div class="container" id="container">
<a class="button" onclick="ShowModal()">弹出窗口</a>
</div>

页面端涉及到的样式：

<style type="text/css">
.container{
width: 600px;
height: 300px;
position: relative;
border: 1px solid #777777;
}
.button{
position: absolute;
left: 15%;
top: 15%;
background: #eee;
padding: 5px 10px ;
}
.button:hover{
background: #aaa;
cursor: pointer;
}
</style>

调用modal插件：

<script type="text/javascript" src="jquery-1.8.3.js"></script>
<script type="text/javascript" src="jquery.modal.js"></script>
<script type="text/javascript">
function ShowModal(){
$('#container').modalInfowindow({
width:300,
height:150,
title:"中国",
content:"中国是中华人名共和国的简称"
});
}
</script>

其中，content可为html代码。

源码下载