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

(通过html5方法自定义属性选择,因此会有兼容性,此方法可适用移动端)

buttonname,与弹窗的name设为变量,作为参数传递。

Buttonname可以是自定义name,HTML5自定义属性data-*  

弹窗的idbuttondata-* 属性值相同。

通过在每个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");

posted @ 2016-02-23 15:37  程序猿凯  阅读(610)  评论(0编辑  收藏  举报