(通过html5方法自定义属性选择,因此会有兼容性,此方法可适用移动端)
将button的name,与弹窗的name设为变量,作为参数传递。
Button的name可以是自定义name,HTML5自定义属性data-*
弹窗的id与button的data-* 属性值相同。
通过在每个button上加上共同的classname即想通过选取共有的classname绑定click事件。
Click事件里头获取data-*的属性值,例如
$('.modal-button').click(function(event) {
var modal = $(this).data('modal');
showModal(modal);//弹窗显示调用
});
var showModal = function(modal){
$thpop=$('#'+modal);
centerModal($thpop);//居中函数调用
$thpopmask.show(); //阴影层
}
// 居中函数
function centerModal(obj) {
/*定义弹出居中窗口的方法*/
windowHeight = $(window).height();//获取窗口高度
windowWidth = $(window).width();//获取窗口宽度
popWidth = obj.width();//获取弹窗宽度
popHeight = obj.height();//获取弹窗高度
//计算弹出窗口的左上角Y的偏移量
var popY = (windowHeight - popHeight)/2;
var popX = (windowWidth - popWidth)/2;
//设定窗口的位置
obj.css("top",popY+"px").css("left",popX+"px");
}