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

本文实例为大家分享了jQuery实现单击按钮遮罩弹出对话框的具体代码，供大家参考，具体内容如下

看到网上一位大神的代码后，大概进行了注释，调试了一下页面以后感觉不错，留作以后使用。

主要用到了：/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}); //设置对话框居中

}

这是一条可以删除的记录

删除时提示

你真的要删除这条记录吗？

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

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