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 相关文章推荐
解析JSON对象与字符串之间的相互转换
Dec 18 Javascript
JS实现网页Div层Clone拖拽效果
Sep 26 Javascript
JS实现页面数据无限加载
Sep 13 Javascript
Form表单按回车自动提交表单的实现方法
Nov 18 Javascript
基于Javascript倒计时效果
Dec 22 Javascript
浅谈vue单一组件下动态修改数据时的全部重渲染
Mar 01 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
vue项目前端埋点的实现
Mar 06 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 Javascript
vue多页面项目中路由使用history模式的方法
Sep 23 Javascript
vue-cli或vue项目利用HBuilder打包成移动端app操作
Jul 29 Javascript
Ant design vue中的联动选择取消操作
Oct 31 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
Windows下IIS6/Apache2.2.4+MySQL5.2+PHP5.2.1安装配置方法
2007/05/03 PHP
php读取EXCEL文件 php excelreader读取excel文件
2012/12/06 PHP
ThinkPHP3.1数据CURD操作快速入门
2014/06/19 PHP
基于Swoole实现PHP与websocket聊天室
2016/08/03 PHP
JavaScript利用正则表达式去除日期中的-
2014/06/09 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
2015/04/16 Javascript
jQuery实现的漂亮表单效果代码
2015/08/18 Javascript
JavaScript中Array对象用法实例总结
2016/11/29 Javascript
Bootstrap3 多个模态对话框无法显示的解决方案
2017/02/23 Javascript
详解Vue 普通对象数据更新与 file 对象数据更新
2017/04/26 Javascript
JS+Canvas绘制动态时钟效果
2017/11/10 Javascript
vue删除html内容的标签样式实例
2018/09/13 Javascript
Vue.js 时间转换代码及时间戳转时间字符串
2018/10/16 Javascript
vue实现的树形结构加多选框示例
2019/02/02 Javascript
Node.js从字符串生成文件流的实现方法
2019/08/18 Javascript
微信小程序实现点击生成随机验证码
2020/09/09 Javascript
[04:16]DOTA2全国高校联赛16强抽签
2018/05/02 DOTA
[04:05]TI9战队采访 - Natus Vincere
2019/08/22 DOTA
Python实现登录接口的示例代码
2017/07/21 Python
对python pandas读取剪贴板内容的方法详解
2019/01/24 Python
Python使用matplotlib实现交换式图形显示功能示例
2019/09/06 Python
Python 单例设计模式用法实例分析
2019/09/23 Python
浅谈pytorch torch.backends.cudnn设置作用
2020/02/20 Python
Pytest参数化parametrize使用代码实例
2020/02/22 Python
python switch 实现多分支选择功能
2020/12/21 Python
前端实现打印图像功能
2019/08/27 HTML / CSS
好莱坞百老汇御用王牌美妆:Koh Gen Do 江原道
2018/04/03 全球购物
如何防止同一个帐户被多人同时登录
2013/08/01 面试题
车间副主任岗位职责
2013/12/24 职场文书
综合实践教学反思
2014/01/31 职场文书
人事行政经理岗位职责
2014/06/18 职场文书
2015年五四青年节活动总结
2015/02/10 职场文书
萤火虫之墓观后感
2015/06/05 职场文书
反四风问题学习心得体会
2016/01/22 职场文书
分布式锁为什么要选择Zookeeper而不是Redis?看完这篇你就明白了
2021/05/21 Redis
html form表单基础入门案例讲解
2021/07/15 HTML / CSS