jQuery实现单击按钮遮罩弹出对话框效果（1）
网络编程 2021-07-04 19:20www.168986.cn编程入门
这篇文章主要为大家详细介绍了jQuery实现单击按钮遮罩弹出对话框，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
本文实例为大家分享了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{
/
设置宽度
设置边框宽度+颜色+引
displaynone表示影藏
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{
/
里面有个displayno；
开始的时候看不到这个div的效果它主要作用是封闭整个页面
/
width: 100%;
height: 100%;
background: #000;
position: absolute;
: 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 =sclT+(brsh-curh)/2; //计算对话框居中时的上边距
objc.css({"left":left,"":}); //设置对话框居中
}
</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>
展示一张在谷歌上的效果
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持狼蚁SEO。
编程语言
- 如何快速学会编程 如何快速学会ug编程
- 免费学编程的app 推荐12个免费学编程的好网站
- 电脑怎么编程：电脑怎么编程网咯游戏菜单图标
- 如何写代码新手教学 如何写代码新手教学手机
- 基础编程入门教程视频 基础编程入门教程视频华
- 编程演示：编程演示浦丰投针过程
- 乐高编程加盟 乐高积木编程加盟
- 跟我学plc编程 plc编程自学入门视频教程
- ug编程成航林总 ug编程实战视频
- 孩子学编程的好处和坏处
- 初学者学编程该从哪里开始 新手学编程从哪里入
- 慢走丝编程 慢走丝编程难学吗
- 国内十强少儿编程机构 中国少儿编程机构十强有
- 成人计算机速成培训班 成人计算机速成培训班办
- 孩子学编程网上课程哪家好 儿童学编程比较好的
- 代码编程教学入门软件 代码编程教程