点击对应不同name的button,显示不同name的弹窗（弹窗功能）

（通过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");

} 

点击对应不同name的button,显示不同name的弹窗（弹窗功能）

原文：http://www.cnblogs.com/clear93/p/5210093.html