(通过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的弹窗(弹窗功能)的更多相关文章

  1. js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表

    js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...

  2. winform中button点击后再点击其他控件致使button失去焦点,此时button出现黑色边线,去掉黑色边线的方法

    winform中button点击后再点击其他控件致使button失去焦点,此时button出现黑色边线,去掉黑色边线的方法 button的FlatAppearence属性下,设置BorderSize= ...

  3. LISTVIEW嵌套GRIDVIEW的一些处理(点击GRIDVIEW的条目,能够显示他在LISTVIEW中的位置)(对这篇文章的优化处理,不每次都new onItemClickListener)

    前几天写了点击GRIDVIEW的条目,能够显示他在LISTVIEW中的位置,当时的处理是在ListView的适配器里的GetView方法里每次都new GridView的onItemClickList ...

  4. android应用开发 button显示两行文本

    自己写了个电话拨号器的程序给男朋友玩,用来专门打我的手机号,为了把界面做的好看一点,须要用到显示两行文本的button.在网上搜罗了两种方法,记录在以下.跟大家一起分享一下,希望能帮到须要的人. 方法 ...

  5. js用button激活 Alert 元素关闭按钮的交互功能

    js用button激活 Alert 元素关闭按钮的交互功能 一.总结 1.点(.)对应class,井号(#)对应id  2.jquery:amaze里面用的jquery,jquery熟悉之后,这些东西 ...

  6. Android_(控件)使用AlertDialog实现点击Button显示出多选框

    单击"更多"按钮,显示出多选框 运行截图: 程序结构 (本想通过Button中android:background使用drawable资源下的图片作为按钮背景,设计太丑就去掉了Σ( ...

  7. 点击更多button显示更多数据的功能实现思路代码

    此功能是根据自己思路去慢慢做出来的,做的不够专业,希望有懂这个的前辈给自己指点指点. //分界线———————————————————————————————————————————————————— ...

  8. 点击轮播图片左右button,实现轮播效果

    点击左右button.实现图片轮播效果.js代码例如以下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(" ...

  9. Jquery 点击图片在弹出层显示大图

    http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...

随机推荐

  1. linux下的网络通信设置:openssh、PuTTY、tightVNC

    OpenSSH的安装: windows上安装PuTTY:  PuZZY上传文件到linux: 1.在window下的cmd中cd到PuZZY所在的文件夹下 2.使用pscp命令上传文件 3.使用psc ...

  2. sas 批量处理缺少缺失值

    DATA S.customer_grade;    SET S.customer_grade;    ARRAY NUM{*} _NUMERIC_;    DO I=1 TO DIM(NUM);   ...

  3. SQL按分隔符拆分字段串

    CREATE VIEW [dbo].[Split_BusinessUnit] AS WITH tt AS ( SELECT BusinessUnit.BusinessUnitId , Business ...

  4. visual studio 版本管理从tfs迁移到svn

    1.首先要解除解决方案的tfs绑定 清除(删除)项目下的所有版本控制文件,这些文件有:*.vssscc,*.vspscc 删除这些版本控制文件比较简单,搜索这些后缀的文件,删除即可. 修改项目的解决方 ...

  5. Spring MVC 类型转换

    SpringMVC类型转换: 1 日期类型转换: private Date birthday; <label for="">生日:<input type=&quo ...

  6. windows gitbook pdf

    1.安装 nodejs 下载地址:https://nodejs.org/download/release/v6.9.2/node-v6.9.2-x64.msi 执行安装 配置环境变量:C:\Progr ...

  7. spring boot controller设置 @Transactional 不回滚的解决办法

    @Transactional @ApiOperation(value = "添加一个用户信息") @RequestMapping(value = "/create&quo ...

  8. 2018 oppo校招前端面试题

    1.Es6 2.http请求过程 3.js事件执行流程(蒙蔽中) [默认冒泡,由内到外,] 4.css 样式选择器的优先级 (!important在类选择器和id选择器都可以使用,但不推荐使用) 5. ...

  9. 常见sql注入的防范总结

    在平时的开发过程中,我们可能很少会刻意的去为项目做一个sql注入的防范,这是因为你可能因为使用了某些框架,而无意间已经有了对应sql注入的一些防范操作(比如mybatis使用#{XX}传参,属于预编译 ...

  10. SQL server约束

    约束的概念:确保在列中输入有效的值并维护表之间的关系. Primary key约束 功能:primary key(主键约束),一个表中只能有一个,不能有空值,不能有重复值. 创建表时定义约束:字段名 ...