点击对应不同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的弹窗(弹窗功能)的更多相关文章
- js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表
js进阶 12-15 jquery如何实现点击button显示列表,点击其它位置隐藏列表 一.总结 一句话总结:在button中阻止事件冒泡. 1.如何咋button中阻止事件冒泡(两种方法)? ev ...
- winform中button点击后再点击其他控件致使button失去焦点,此时button出现黑色边线,去掉黑色边线的方法
winform中button点击后再点击其他控件致使button失去焦点,此时button出现黑色边线,去掉黑色边线的方法 button的FlatAppearence属性下,设置BorderSize= ...
- LISTVIEW嵌套GRIDVIEW的一些处理(点击GRIDVIEW的条目,能够显示他在LISTVIEW中的位置)(对这篇文章的优化处理,不每次都new onItemClickListener)
前几天写了点击GRIDVIEW的条目,能够显示他在LISTVIEW中的位置,当时的处理是在ListView的适配器里的GetView方法里每次都new GridView的onItemClickList ...
- android应用开发 button显示两行文本
自己写了个电话拨号器的程序给男朋友玩,用来专门打我的手机号,为了把界面做的好看一点,须要用到显示两行文本的button.在网上搜罗了两种方法,记录在以下.跟大家一起分享一下,希望能帮到须要的人. 方法 ...
- js用button激活 Alert 元素关闭按钮的交互功能
js用button激活 Alert 元素关闭按钮的交互功能 一.总结 1.点(.)对应class,井号(#)对应id 2.jquery:amaze里面用的jquery,jquery熟悉之后,这些东西 ...
- Android_(控件)使用AlertDialog实现点击Button显示出多选框
单击"更多"按钮,显示出多选框 运行截图: 程序结构 (本想通过Button中android:background使用drawable资源下的图片作为按钮背景,设计太丑就去掉了Σ( ...
- 点击更多button显示更多数据的功能实现思路代码
此功能是根据自己思路去慢慢做出来的,做的不够专业,希望有懂这个的前辈给自己指点指点. //分界线———————————————————————————————————————————————————— ...
- 点击轮播图片左右button,实现轮播效果
点击左右button.实现图片轮播效果.js代码例如以下: $(function () { var index = 1; var pPage = 1; var $v_citemss = $(" ...
- Jquery 点击图片在弹出层显示大图
http://blog.csdn.net/wongwaidah/article/details/28432427(案例链接出处,本人只是转载收藏) <html> <head> ...
随机推荐
- Change default network name (ens33) to old “eth0” on Ubuntu 18.04 / Ubuntu 16.04
Change default network name (ens33) to old “eth0” on Ubuntu 18.04 / Ubuntu 16.04 By Raj Last updated ...
- Codeforces-Educational Codeforces Round 53题解
写之前,先发表下感慨:好久没写题解了,也许是因为自己越来越急利了,也可以说是因为越来越懒了. A. Diverse Substring 直接找一找有没有相邻的两个不同的字符即可. B. Vasya a ...
- delphi WebBrowser的使用方法详解(六)
通篇引用mshtml; 一.webbrowser获取滚动条的位置 function GetScrollPositionX(FWB:TEmbeddedWB):Integer; //水平滚动条位置 ...
- 针对开发项目的NABCD的分析
N(Need需求) 我们的创意是用户登录我们的软件,就可以实现自己修改图片,添加文字.解决了目前用户不知道如何P图,如何添加文字的难题. A(Approach做法) 我们的团队将用VS软件开发一个修改 ...
- day19常用模块2
常用模块21 shelve模块 也是一种序列化方式 使用方法 1.open sl = shelve.open("shelvetest.txt") ...
- General error: 24374 OCIStmtFetch: ORA-24374: define not done before fetch or execute and fetch
问题 $sql='insert into "test"("id") values(4)'; $res=$this->conn->query($sql ...
- uuid.uuid4().hex
uuid.uuid4().hex .hex 将生成的uuid字符串中的 - 删除
- js 数组对象的操作方法
在jquery中处理JSON数组的情况中遍历用到的比较多,但是用添加移除这些好像不是太多. 今天试过json[i].remove(),json.remove(i)之后都不行,看网页的DOM对象中好像J ...
- spring 事务回滚。
在平时的业务难免会遇到 sql异常. 有些业务会涉及 一个方法多个操作例如 dao.update() 1 dao.save(); 2 如果1正常,2不正常.默认是不回滚的. 所以在这个地方要手动处理 ...
- 55.纯 CSS 创作一个太阳、地球、月亮的运转模型
原文地址:https://segmentfault.com/a/1190000015313341 感想:主要运用边框.伪元素.动画. HTML code: <div class="co ...