**
觉得模态框制作是一件很难的事？那你就out， Let me show you ！静下心来，10分钟教你做一个模态框！
**
静不下新来的直接下源码看：下载源码
1 S T
准备个空白htm文件，css文件，然后引入css文件
2 N D
首先 ，你需要知道原理，按常理说，简单的弹出模态框就只需要两个div，一个是外层的div ， 用来实现当你调用模态框的时候的背景变为全灰和不可选状态；再有一个内层的div，用来展示你模态框的内容的容器。我是把整个容器封成了JS对象API，供大家调用。
上代码：
function Modelbox() {
this.set = function(params) {
$("body").append('<div class="model-box" id="modelbox"><div class="model-alert" id="modelalert"></div></div>');
$("#modelalert").css(params.direction, params.fromwhere + '%').empty();
// params.direction
// params.speed
// params.from
// params.to
// params.fromwhere
// params.towhere
// params.templateURL
$.ajax({
'method': 'get',
'url': params.templateURL,
success: function(response) {
$("#modelalert").append(response);
}
})
this.show = function() {
$("#modelbox").show();
if (params.direction == 'left') {
$("#modelalert").animate({
left: params.towhere + '%'
}, params.speed);
$("#modelbox").click(function() {
$("#modelalert").animate({
left: params.fromwhere + "%"
}, params.speed, function() {
// body...
$("#modelbox").hide();
$("#modelbox").remove();
});
});
} else {
$("#modelalert").animate({
right: params.towhere + '%'
}, params.speed);
$("#modelbox").click(function() {
$("#modelalert").animate({
right: params.fromwhere + "%"
}, params.speed, function() {
// body...
$("#modelbox").hide();
$("#modelbox").remove();
});
});
}
$("#modelalert").click(function(event) {
// event.stopPropagation();
return false;
})
}
show();
}
return this;
}
首先，这是一个类，类中有两个成员，set 和 show， set用于设置初始化的参数，比如说弹出的方向，位置，速度等， show 用于实例化参数，方便容器调用
CSS CODE:
.model-box{
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color:#C9C9C9;
opacity: 0.5;
display: none;
cursor: not-allowed;
}
.model-alert{
position: absolute;
top: 5em;
width:60%;
height: 80%;
background-color: #fff;
color:#000;
opacity: 1.5;
box-shadow: 1px 1px 3px 3px #7A7575;
cursor: pointer;
}
model-box用于设置外层div容器的css，model-alert用于设置内层css的样式。
3 R D
实例化并调用：
var model = Modelbox();
$("#model").click(function(){
model.set({
'direction': 'right',
'fromwhere': 160,
'towhere': 20,
'speed': 'slow',
'templateURL': 'tpls/gets/msg.html'
});
});
这里设置了一个ID 为model的button用来触该模态框，directon为模态框弹出的方向，fromwhere 是模态框的初始位置，单位%，towhere为模态框的终点位置，speed为弹出的速度，对应的值可以参考animation函数的speed，templateURL为容器中的内容，可以是另外一个html文件，这样方便编写。
让我们来看看效果（记得放在本地服务器下测试哦~~）：
