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 相关文章推荐
select标记美化--JS式插件、后期加载
Apr 01 Javascript
Function.prototype.bind用法示例
Sep 16 Javascript
Firefox中通过JavaScript复制数据到剪贴板(Copy to Clipboard 跨浏览器版)
Nov 22 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
jQuery表格排序组件-tablesorter使用示例
May 26 Javascript
JavaScript学习笔记之内置对象
Jan 22 Javascript
VUEJS实战之利用laypage插件实现分页(3)
Jun 13 Javascript
jQuery实现的无限级下拉菜单功能示例
Sep 12 Javascript
ES7中利用Await减少回调嵌套的方法详解
Nov 01 Javascript
详解node Async/Await 更好的异步编程解决方案
May 10 Javascript
记一次Vue.js混入mixin的使用(分权限管理页面)
Apr 17 Javascript
node.js使用express-fileupload中间件实现文件上传
Jul 16 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调用Oracle存储过程
2006/10/09 PHP
在PHP中执行系统外部命令
2006/10/09 PHP
php自动更新版权信息显示的方法
2015/06/19 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
获取URL地址中的文件名和参数的javascript代码
2009/09/02 Javascript
十个迅速提升JQuery性能让你的JQuery跑得更快
2012/12/10 Javascript
原生JavaScript实现合并多个数组示例
2014/09/21 Javascript
node.js中的fs.chmodSync方法使用说明
2014/12/18 Javascript
jquery京东商城双11焦点图多图广告特效代码分享
2015/09/06 Javascript
基于jquery实现图片上传本地预览功能
2016/01/08 Javascript
JS判断字符串变量是否含有某个字串的实现方法
2016/06/03 Javascript
第一次接触神奇的Bootstrap网格系统
2016/07/27 Javascript
bootstrap下拉列表与输入框组结合的样式调整
2016/10/08 Javascript
JavaScript实现大图轮播效果
2017/01/11 Javascript
layer弹出层中H5播放器全屏出错的解决方法
2017/02/21 Javascript
js实现楼层导航功能
2017/02/23 Javascript
关于jQuery.ajax()的jsonp碰上post详解
2017/07/02 jQuery
vue实现点击当前标签高亮效果【推荐】
2018/06/22 Javascript
Python实现的简单hangman游戏实例
2015/06/28 Python
Python构造自定义方法来美化字典结构输出的示例
2016/06/16 Python
python基础教程项目四之新闻聚合
2018/04/02 Python
利用Python如何实现一个小说网站雏形
2018/11/23 Python
python读取图像矩阵文件并转换为向量实例
2020/06/18 Python
python实现图片转换成素描和漫画格式
2020/08/19 Python
如何使用css3实现一个类在线直播的队列动画的示例代码
2020/06/17 HTML / CSS
HTML5 Canvas像素处理使用接口介绍
2012/12/02 HTML / CSS
Oasis服装官网:时尚女装在线
2020/07/09 全球购物
企业面试题试卷附带答案
2015/12/20 面试题
预备党员思想汇报范文
2014/01/11 职场文书
俄罗斯商务邀请函
2014/01/26 职场文书
《两只鸟蛋》教学反思
2014/02/10 职场文书
2014年领班工作总结
2014/11/25 职场文书
行政司机岗位职责
2015/04/10 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
创业计划书之网络外卖
2019/10/31 职场文书
SpringBoot SpringEL表达式的使用
2021/07/25 Java/Android