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图片阅览组件
Nov 09 Javascript
JavaScript实现简单获取当前网页网址的方法
Nov 09 Javascript
jQuery实现无限往下滚动效果代码
Apr 16 Javascript
Javascript 基础---Ajax入门必看
Jul 06 Javascript
jQuery进阶实践之利用最优雅的方式如何写ajax请求
Dec 20 jQuery
Vue中的scoped实现原理及穿透方法
May 15 Javascript
vue-image-crop基于Vue的移动端图片裁剪组件示例
Aug 28 Javascript
浅谈Vue数据响应
Nov 05 Javascript
Node.js 多进程处理CPU密集任务的实现
May 26 Javascript
Angular 多级路由实现登录页面跳转(小白教程)
Nov 19 Javascript
Jquery+AJAX实现无刷新上传并重命名文件操作示例【PHP后台接收】
May 29 jQuery
在vue项目中引用Antv G2,以饼图为例讲解
Oct 28 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如何把表单内容提交到数据库
2019/07/08 PHP
Javascript的IE和Firefox兼容性汇编
2006/07/01 Javascript
javascript 写类方式之四
2009/07/05 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
jquery如何判断表格同一列不同行input数据是否重复
2014/05/14 Javascript
使用jQuery mobile库检测url绝对地址和相对地址的方法
2015/12/04 Javascript
CascadeView级联组件实现思路详解(分离思想和单链表)
2016/04/12 Javascript
JS实现星星海特效
2019/12/24 Javascript
JS实现可以用键盘方向键控制的动画
2020/12/11 Javascript
理解python多线程(python多线程简明教程)
2014/06/09 Python
Python中使用pprint函数进行格式化输出的教程
2015/04/07 Python
Python赋值语句后逗号的作用分析
2015/06/08 Python
详解python3中tkinter知识点
2018/06/21 Python
python 用opencv调用训练好的模型进行识别的方法
2018/12/07 Python
python处理两种分隔符的数据集方法
2018/12/12 Python
在脚本中单独使用django的ORM模型详解
2020/04/01 Python
Python函数必须先定义,后调用说明(函数调用函数例外)
2020/06/02 Python
Python接口自动化测试框架运行原理及流程
2020/11/30 Python
详解Django自定义图片和文件上传路径(upload_to)的2种方式
2020/12/01 Python
Shopee印度尼西亚:东南亚与台湾市场最大电商平台
2018/06/17 全球购物
英国探险旅游专家:Explore
2018/12/20 全球购物
Melissa鞋英国官方网站:Nonnon
2019/05/01 全球购物
ESDlife健康生活易:身体检查预订、搜寻及比较
2019/05/10 全球购物
巴西香水和化妆品购物网站:The Beauty Box
2019/09/03 全球购物
全球最大的瓷器、水晶和银器零售商:Replacements
2020/06/15 全球购物
易程科技软件测试笔试
2013/03/24 面试题
幼师自荐信
2013/10/26 职场文书
英文自荐信
2013/12/15 职场文书
小学生成长感言
2014/01/30 职场文书
单位工作证明范文
2014/09/14 职场文书
房屋授权无偿使用证明
2014/11/29 职场文书
2015年乡镇扶贫工作总结
2015/04/08 职场文书
2015年学生会主席工作总结
2015/04/21 职场文书
辞职信怎么写?你都知道吗?
2019/06/24 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
Html5获取用户当前位置的几种方式
2022/01/18 HTML / CSS