jQuery实现单击按钮遮罩弹出对话框效果(1)


Posted in Javascript onFebruary 20, 2017

本文实例为大家分享了jQuery实现单击按钮遮罩弹出对话框的具体代码,供大家参考,具体内容如下

看到网上一位大神的代码后,大概进行了注释,调试了一下页面以后感觉不错,留作以后使用。
主要用到了:/jquery-1.10.2.min.js
代码如下:

<html>
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title>遮罩弹出窗口</title> 
<script type="text/javascript" src="../js/jquery-1.10.2.min.js"></script> 
 
<style type="text/css"> 
/* CSS Document */ 
 
@CHARSET "UTF-8"; 
*{ 
margin: 0px; 
padding: 0px; 
 
} 
.divShow{ 
/*设置字体高度 
div的高度 
背景色 
div宽度 
左内距为10px 
*/ 
line-height: 50px; 
height: 60px; 
background-color: #dddddd; 
width: 300px; 
padding-left: 15px; 
} 
 
 
 
.dialog{ 
/* 
设置宽度 
设置边框宽度+颜色+引 
display:none表示影藏 
z-index://保证该层在最上面显示 
*/ 
width: 360px; 
border: 10px #fff solid; 
position: absolute; 
display: none; 
z-index: 101; 
} 
 
.dialog .title{ 
/* 
设置背景色 
设置内边距 
设置字体颜色 
设置字体加粗 
*/ 
background:#fbaf15; 
padding: 10px; 
color: #fff; 
font-weight: bold; 
 
} 
 
.dialog .title img{ 
/* 
设置元素向右浮动 
*/ 
float:right; 
} 
 
.dialog .content{ 
/* 
设置背景色 
设置内边距 
设置高度 
*/ 
background: #fff; 
padding: 25px; 
height: 60px; 
} 
 
.dialog .content img{ 
float: left; 
} 
.dialog .content span{ 
float: left; 
padding: 10px; 
 
} 
 
 
.dialog .bottom{ 
/* 
设置文本向右对齐 
设置内边局 上右下左 
*/ 
text-align: right; 
padding: 10 10 10 0; 
background: #eee; 
} 
 
.mask{ 
/* 
里面有个display:no; 
开始的时候看不到这个div的效果它主要作用是封闭整个页面 
*/ 
width: 100%; 
height: 100%; 
background: #000; 
position: absolute; 
top: 0px; 
left: 0px; 
display: none; 
z-index: 100; 
 
} 
.btn{ 
 
border: #666 1px solid; 
width: 65px; 
 
} 
 
</style> 
<script type="text/javascript"> 
 
// JavaScript Document$(function(){ 
 
//绑定删除按钮的触发事件 
 
$(document).ready(function(){ 
//按下按钮触发操作 
$("#button1").click(function(){ 
//设置 div 元素的不透明级别:透明度取值(取值范围[0.0,1.0]) 
$(".mask").css("opacity","0.3").show(); 
//制作对话框 
showDialog(); 
//展现css的特效 
$(".dialog").show(); 
 
}); 
 
 
//当页面窗口大小改变时触发的事件 
$(window).resize(function(){ 
 
if(!$(".dialog").is(":visible")){ 
return; 
} 
showDialog(); 
}); 
 
//注册关闭图片单击事件 
$(".title img").click(function(){ 
//隐藏效果 
$(".dialog").hide(); 
$(".mask").hide(); 
 
}); 
//取消按钮事件 
$("#noOk").click(function(){ 
$(".dialog").hide(); 
$(".mask").hide(); 
}); 
 
//确定按钮事假 
$("#ok").click(function(){ 
$(".dialog").hide(); 
$(".mask").hide(); 
 
if($("input:checked").length !=0){ 
//注意过滤器选择器中间不能存在空格$("input :checked")这样是错误的 
$(".divShow").remove();//删除某条数据 
} 
 
}); 
}); 
/* 
* 根据当前页面于滚动条的位置,设置提示对话框的TOP和left 
*/ 
function showDialog(){ 
var objw=$(window);//获取当前窗口 
var objc=$(".dialog");//获取当前对话框 
var brsw=objw.width(); //获取页面宽度 
var brsh=objw.height(); //获取页面高度 
var sclL=objw.scrollLeft(); //获取页面左滑动条信息 
var sclT=objw.scrollTop(); 
var curw=objc.width(); //获取对话框宽度 
var curh=objc.height(); //获取对话框高度 
 
var left=sclL+(brsw -curw)/2; //计算对话框居中时的左边距 
var top=sclT+(brsh-curh)/2; //计算对话框居中时的上边距 
 
 
objc.css({"left":left,"top":top}); //设置对话框居中 
 
} 
</script> 
</head> 
 
<body> 
<div class="divShow"> 
<input type="checkbox" id="chexkBox1"> <a href="#">这是一条可以删除的记录</a> 
<input id="button1" type="button" value="删除" class="btn"> 
</div> 
 
 
<div class="mask"></div> 
<div class="dialog"> 
 
<div class="title"> 
<img alt="点击可以关闭" src="" width="20px" height="20px;"> 
删除时提示 
</div> 
 
<div class="content"> 
<img alt="" src="" width="60px" height="60px"> 
<span>你真的要删除这条记录吗?</span> 
</div> 
 
<div class="bottom"> 
<input type="button" id="ok" value="确定" class="btn"> 
<input type="button" id="noOk" value="取消" class="btn"> 
</div> 
 
</div> 
 
</body> 
</html>

展示一张在谷歌上的效果:

jQuery实现单击按钮遮罩弹出对话框效果(1)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript去掉空格的方法集合
Dec 28 Javascript
40个有创意的jQuery图片和内容滑动及弹出插件收藏集之三
Jan 03 Javascript
JS对select控件option选项的增删改查示例代码
Oct 21 Javascript
js模仿php中strtotime()与date()函数实现方法
Aug 11 Javascript
JS中用三种方式实现导航菜单中的二级下拉菜单
Oct 31 Javascript
layer实现关闭弹出层刷新父界面功能详解
Nov 15 Javascript
详解使用 Node.js 开发简单的脚手架工具
Jun 08 Javascript
JS加密插件CryptoJS实现的Base64加密示例
Aug 16 Javascript
element-ui 设置菜单栏展开的方法
Aug 22 Javascript
Vue的watch和computed方法的使用及区别介绍
Sep 06 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
Layui数据表格 前后端json数据接收的方法
Sep 19 Javascript
jQuery实现链接的title快速出现的方法
Feb 20 #Javascript
Angular企业级开发——MVC之控制器详解
Feb 20 #Javascript
原生JS实现《别踩白块》游戏(兼容IE)
Feb 20 #Javascript
javascript基础练习之翻转字符串与回文
Feb 20 #Javascript
JS实现动态修改table及合并单元格的方法示例
Feb 20 #Javascript
原生javascript实现读写CSS样式的方法详解
Feb 20 #Javascript
JS实现中国公民身份证号码有效性验证
Feb 20 #Javascript
You might like
PHP新手上路(十四)
2006/10/09 PHP
简单的自定义php模板引擎
2016/08/26 PHP
PHP session会话操作技巧小结
2016/09/27 PHP
php从身份证获取性别和出生年月
2017/02/09 PHP
CI(CodeIgniter)框架视图中加载视图的方法
2017/03/24 PHP
php判断电子邮件是否正确方法
2018/12/04 PHP
网页中返回顶部代码(多种方法)另附注释说明
2013/04/24 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
JS可以控制样式的名称写法一览
2014/01/16 Javascript
浅谈javascript事件取消和阻止冒泡
2015/05/26 Javascript
JavaScript中的anchor()方法使用详解
2015/06/08 Javascript
js实现简洁大方的二级下拉菜单效果代码
2015/09/01 Javascript
原生js实现网易轮播图效果
2020/04/10 Javascript
走进javascript——不起眼的基础,值和分号
2017/02/24 Javascript
从零开始做一个pagination分页组件
2017/03/15 Javascript
JavaScript适配器模式详解
2017/10/19 Javascript
微信小程序实现日历效果
2018/12/28 Javascript
原生JS 实现的input输入时表格过滤操作示例
2019/08/03 Javascript
NodeJS模块Buffer原理及使用方法解析
2020/11/11 NodeJs
原生JS实现音乐播放器的示例代码
2021/02/25 Javascript
[00:32]2018DOTA2亚洲邀请赛出场——VP
2018/04/04 DOTA
优化Python代码使其加快作用域内的查找
2015/03/30 Python
python脚本设置超时机制系统时间的方法
2016/02/21 Python
对Python 检查文件名是否规范的实例详解
2019/06/10 Python
在python中用url_for构造URL的方法
2019/07/25 Python
Django配置文件代码说明
2019/12/04 Python
新加坡最受追捧的体验平台:Hapz
2018/01/01 全球购物
英国电子专家:maplin
2019/09/04 全球购物
管理学专业个人求职信范文
2013/12/13 职场文书
个人求职信范文
2014/05/24 职场文书
学校门卫岗位职责范本
2014/06/30 职场文书
党员反对四风问题思想汇报
2014/09/12 职场文书
竞聘报告优秀范文
2014/11/06 职场文书
python实现的web监控系统
2021/04/27 Python
vue使用refs获取嵌套组件中的值过程
2022/03/31 Vue.js
php解析非标准json、非规范json的方式实例
2022/05/10 PHP