最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
jQuery实现单击按钮遮罩弹出对话框效果(1)
时间:2017-04-20 编辑:简简单单 来源:一聚教程网
看到网上一位大神的代码后,大概进行了注释,调试了一下页面以后感觉不错,留作以后使用。
主要用到了:/jquery-1.10.2.min.js
代码如下:
代码如下 | 复制代码 |
/* 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;
}
// 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}); //设置对话框居中
}
删除时提示
你真的要删除这条记录吗?
|
展示一张在谷歌上的效果:
相关文章
- jQuery实现单击按钮遮罩弹出对话框效果(2) 04-20
- jQuery点击弹出层弹出模态框点击模态框消失代码分享 02-13
- jQuery弹出层插件hwLayer使用方法详解 05-21
- jquery实现点击弹出带标题栏的弹出层效果代码 09-24
- jquery弹出对话框背景遮罩例子 09-02
- jquery-ui中弹出层(dialog)使用方法 05-02