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延时重复执行函数 lLoopRun.js
Jun 29 Javascript
jqPlot 基于jquery的画图插件
Apr 26 Javascript
jQuery EasyUI API 中文文档 - ComboGrid 组合表格
Oct 13 Javascript
jquery offset函数应用实例
Nov 14 Javascript
微信小程序 时间格式化(util.formatTime(new Date))详解
Nov 16 Javascript
微信小程序 UI与容器组件总结
Feb 21 Javascript
高性能的javascript之加载顺序与执行原理篇
Jan 14 Javascript
jQuery实现监听下拉框选中内容发生改变操作示例
Jul 13 jQuery
ES10 特性的完整指南小结
Mar 04 Javascript
史上最为详细的javascript继承(推荐)
May 18 Javascript
Openlayers绘制地图标注
Sep 28 Javascript
jQuery实现二级导航菜单的示例
Sep 30 jQuery
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木马攻击防御之道
2008/03/24 PHP
codeigniter上传图片不能正确识别图片类型问题解决方法
2014/07/25 PHP
PHP面向对象精要总结
2014/11/07 PHP
CodeIgniter辅助之第三方类库third_party用法分析
2016/01/20 PHP
ucenter中词语过滤原理分析
2016/07/13 PHP
PHP下载文件函数与用法示例
2019/09/27 PHP
PHP单元测试配置与使用方法详解
2019/12/27 PHP
Angularjs实现多个页面共享数据的方式
2016/03/29 Javascript
利用AJAX实现WordPress中的文章列表及评论的分页功能
2016/05/17 Javascript
AngularJS实现用户登录状态判断的方法(Model添加拦截过滤器,路由增加限制)
2016/12/12 Javascript
angular 实现的输入框数字千分位及保留几位小数点功能示例
2018/06/19 Javascript
jQuery点击页面其他部分隐藏下拉菜单功能
2018/11/27 jQuery
vue 解决移动端弹出键盘导致页面fixed布局错乱的问题
2019/11/06 Javascript
详解vue中v-model和v-bind绑定数据的异同
2020/08/10 Javascript
原生JS生成指定位数的验证码
2020/10/28 Javascript
[56:42]VP vs RNG 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/17 DOTA
python机器学习理论与实战(四)逻辑回归
2018/01/19 Python
利用Python写一个爬妹子的爬虫
2018/06/08 Python
对python 多个分隔符split 的实例详解
2018/12/20 Python
python多任务及返回值的处理方法
2019/01/22 Python
基于树莓派的语音对话机器人
2019/06/17 Python
Python何时应该使用Lambda函数
2019/07/02 Python
Python使用scipy模块实现一维卷积运算示例
2019/09/05 Python
Python运行提示缺少模块问题解决方案
2020/04/02 Python
使用OpenCV去除面积较小的连通域
2020/07/05 Python
使用scrapy ImagesPipeline爬取图片资源的示例代码
2020/09/28 Python
详解css position 5种不同的值的用法
2019/07/30 HTML / CSS
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
美国Jeep配件购物网站:Morris 4×4 Center
2019/05/01 全球购物
彪马西班牙官网:PUMA西班牙
2019/06/18 全球购物
男女钓鱼靴和甲板鞋:XTRATUF
2021/01/09 全球购物
乡镇干部十八大感言
2014/02/17 职场文书
高中生学期学习自我评价
2014/02/24 职场文书
检查机关党的群众路线个人整改措施
2014/10/04 职场文书
民用住房租房协议书
2014/10/29 职场文书
gojs实现蚂蚁线动画效果
2022/02/18 Javascript