jQuery实现单击按钮遮罩弹出对话框效果（1）

本文实例为大家分享了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>

展示一张在谷歌上的效果：

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • JQuery弹出炫丽对话框的同时让背景变灰色

    JQuery弹出炫丽对话框的同时让背景变灰色

    这段时间在做开发时,用到了JQuery弹出炫丽对话框,背景变灰色.特地和大家分享分享. 先看效果图:  代码如下: 复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script src=&q

  • Jquery EasyUI中弹出确认对话框以及加载效果示例代码

    复制代码 代码如下: //confirm function Confirm(msg, control) {    $.messager.confirm("确认", msg, function (r) {        if (r) {            return true;        }    });    return false;} 复制代码 代码如下: //Loadfunction Load() {    $("<div class=\"da

  • jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)

    jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)

    我们在天猫进行购物的时候,经常会碰到单击删除按钮或者登陆按钮后,弹出对话框问你是否删除或者弹出一个登陆对话框,并且我们也是可以看到我们之前页面的信息,就是点击不了,只有对对话框进行操作后才有相应的变化.截图如下(以天猫为例)  如图所示,上面就是天猫的效果图,其实这就是通过jQuery实现的,并且实现的过程也不是很不复杂,那么现在就让我们来看看实现的过程吧. 首先是页面的布局部分:delete.html 复制代码 代码如下: <!DOCTYPE html> <html> <h

  • jQuery Dialog 弹出层对话框插件

    原理很简单,通过JS动态构建一个div层,将其插入到body中,然后通过调整position的CSS属性为absolute或fixed,使其脱离原来的文档流的位置.再通过适当的加工美化就成了. 复制代码 代码如下: <!-- 背景遮盖层 --> <div class="dialog-overlay"></div> <!-- 对话框 --> <div class="dialog"> <div class

  • boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器

    boxy基于jquery的弹出层对话框插件扩展应用 弹出层选择器

    我们使用热门的jquery进行设计,同时我们选择效果比较优秀的boxy弹出插件进行扩展(关于boxy的相关资料,请参照张鑫旭博客http://www.zhangxinxu.com/wordpress/?p=318).下面介绍boxy作为选择器框架的应用. 对于选择器,相信用过招聘网站的人都不会陌生(就是那个点击就弹出的,选择行业.职位和地区的东西),选择器难点就在于样式调试,主要针对的是IE6.这里介绍行业.职位和地区选择器,下载的Demo包含这三个选择器. 行业选择器:无关联,调用语句为Box

  • 非常强大的 jQuery.AsyncBox 弹出对话框插件

    非常强大的 jQuery.AsyncBox 弹出对话框插件

    复制代码 代码如下: <link href="asyncbox/skins/ZCMS/asyncbox.css" rel="stylesheet" type="text/css" /> <script src="asyncbox/jQuery.v1.4.2.js" type="text/javascript"></script> <script src="

  • jQuery UI Dialog 创建友好的弹出对话框实现代码

    主要参数 jQuery UI Dialog常用的参数有: 1.autoOpen:默认true,即dialog方法创建就显示对话框 2.buttons:默认无,用于设置显示的按钮,可以是JSON和Array形式: {"确定":function(){},"取消":function(){}} [{text:"确定", click: function(){}},{text:"取消",click:function(){}}] 3.mod

  • Jquery实现页面加载时弹出对话框代码

    复制代码 代码如下: <script type="text/javascript" src="jquery-1.4.2.js"></script> //下载 <script type="text/javascript"> $(document).ready(function(){ alert("您好,欢迎来到Jquery!"); }) </script> 将以上代码置于head标

  • 基于jQuery的弹出警告对话框美化插件(警告，确认和提示)

    基于jQuery的弹出警告对话框美化插件(警告，确认和提示)

    前不久在官方网站是看见这个插件,所以今天趁有空就看了一下,随便给大家共享一下.也许你早已知道了 ,如果是这样那请跳过,不要拍砖. 这个Jquery插件的目的是替代JavaScript的标准函数alert(),confirm(),和 prompt().这个插件有 如下这些特点: 1:这个插件可以使你可以支持你自己的css制定.使你的网站看起来更专业. 2:允许你自定义对话框的标题. 3:在IE7中,可以使你避免使用JavaScript 的prompt()函数带来的页面重新加载. 4:这些方法都模拟

  • jquery删除提示框弹出是否删除对话框

    复制代码 代码如下: /** * 删除草稿 */ function deleteDraft(the,id){ $.messager.confirm('删除草稿提醒', '</br>确定删除这篇草稿吗?</br></br>',function(r){ if(r){ $.ajax({ type : "post", url : "http://localhost:8090/webplus3/_web/sns/delBlog.do?_p=YXM9M

随机推荐