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 相关文章推荐
jQuery 的全选(全非选)即取得被选中的值使用介绍
Nov 12 Javascript
JavaScript中的包装对象介绍
Jan 27 Javascript
jquery实现动静态条形统计图
Aug 17 Javascript
探究Vue.js 2.0新增的虚拟DOM
Oct 20 Javascript
JS设置随机出现2个数字的实例代码
Jul 19 Javascript
ES6解构赋值的功能与用途实例分析
Oct 31 Javascript
IE9 elementUI文件上传的问题解决
Oct 17 Javascript
详解使用element-ui table组件的筛选功能的一个小坑
Nov 02 Javascript
React Component存在的几种形式详解
Nov 06 Javascript
基于Node.js的大文件分片上传示例
Jun 19 Javascript
Vue混入mixins滚动触底的方法
Nov 22 Javascript
vue相同路由跳转强制刷新该路由组件操作
Aug 05 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
全国FM电台频率大全 - 3 河北省
2020/03/11 无线电
php产生随机数的两种方法实例代码 输出随机IP
2011/04/08 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
destoon调用企业会员公司形象图片的实现方法
2014/08/21 PHP
php返回当前日期或者指定日期是周几
2015/05/21 PHP
php socket通信简单实现
2016/11/18 PHP
支持汉转拼和拼音分词的PHP中文工具类ChineseUtil
2018/02/23 PHP
jQuery 操作XML入门
2008/12/25 Javascript
JavaScript之Getters和Setters 平台支持等详细介绍
2012/12/07 Javascript
window.location的重写及判断location是否被重写
2014/09/04 Javascript
JavaScript数组常用方法
2015/03/02 Javascript
jQuery实现Tab菜单滚动切换的方法
2015/09/21 Javascript
jQuery Validate格式验证功能实例代码(包括重名验证)
2017/07/18 jQuery
如何手动实现es5中的bind方法详解
2018/12/07 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
js实现聊天对话框
2020/02/08 Javascript
VUE项目实现主题切换的多种方法
2020/11/26 Vue.js
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
Python实现文件复制删除
2016/04/19 Python
ubuntu安装mysql pycharm sublime
2018/02/20 Python
Python中反射和描述器总结
2018/09/23 Python
python单线程下实现多个socket并发过程详解
2019/07/27 Python
Python中IP地址处理IPy模块的方法
2019/08/16 Python
keras 多gpu并行运行案例
2020/06/10 Python
python opencv把一张图片嵌入(叠加)到另一张图片上的实现代码
2020/06/11 Python
django filter过滤器实现显示某个类型指定字段不同值方式
2020/07/16 Python
python实现简单的五子棋游戏
2020/09/01 Python
Python开发入门——迭代的基本使用
2020/09/03 Python
CSS3属性background-size使用指南
2014/12/09 HTML / CSS
利用 CSS3 实现的无缝轮播功能代码
2017/09/25 HTML / CSS
Linux不知道文件后缀名怎么判断文件类型
2012/04/26 面试题
历史专业毕业生的自我鉴定
2013/11/15 职场文书
回门宴新郎答谢词
2014/01/12 职场文书
高级编程求职信模板
2014/02/16 职场文书
学生会主席竞聘书
2014/03/31 职场文书
副总经理任命书
2014/06/05 职场文书