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>
展示一张在谷歌上的效果：
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
jQuery实现单击按钮遮罩弹出对话框(仿天猫的删除对话框)
我们在天猫进行购物的时候,经常会碰到单击删除按钮或者登陆按钮后,弹出对话框问你是否删除或者弹出一个登陆对话框,并且我们也是可以看到我们之前页面的信息,就是点击不了,只有对对话框进行操作后才有相应的变化.截图如下(以天猫为例) 如图所示,上面就是天猫的效果图,其实这就是通过jQuery实现的,并且实现的过程也不是很不复杂,那么现在就让我们来看看实现的过程吧. 首先是页面的布局部分:delete.html 复制代码 代码如下: <!DOCTYPE html> <html> <h
-
jquery实现界面点击按钮弹出悬浮框
本文实例为大家分享了jquery实现界面点击按钮弹出悬浮框的具体代码,供大家参考,具体内容如下 首先定义两个div: 一个是背景,一个是悬浮窗. <input id="Button1" type="button" value="点击弹出层"/> <!--弹出层时背景层DIV--> <div id="fade" class="black_ove
-
jQuery实现首页悬浮框
本文实例为大家分享了jQuery实现首页悬浮框的具体代码,供大家参考,具体内容如下 基于jQuery实现首页悬浮框,如下图所示 1.在页面中引入jQuery.bay-window.js,jQuery.bay-window.js的代码如下: !function($){ /** * Description: jquery飘窗插件,可自适应浏览器宽高的变化 * Author: ddqre12345 * CreateTime: 2017.5.3 * param: args={
-
使用jQuery UI的tooltip函数修饰title属性的气泡悬浮框
使用jQuery UI的tooltip()函数,可以使悬浮提示框不再那么千篇一律.点击这里先看看效果吧:http://www.keleyi.com/keleyi/phtml/tooltip/ 以下是完整代码:保存到html文件打开也可以看效果. 复制代码 代码如下: <!doctype html> <html> <head> <meta http-equiv="Content-Type" content="text/html; cha
-
基于Jquery的仿Windows Aero弹出窗(漂亮的关闭按钮)
今天介绍的Jquery Dialog Plugins AeroWindow ,是其中最个性的一款,因为他拥有神似Windows 7 Aero效果的肉身. 效果图:演示: 官方演示 本地演示 特点 独特: 窗口移动时标题栏反光效果 窗口按钮:最小化,减少,最大化和关闭 双击窗口标题栏最大化,缩小 活动窗口突出显示 更改窗口大小(resize) 鼠标拖拽窗口 N多个配置选项 配置选项 窗口标题 窗口的起始位置的X / Y 窗口大小 最小的窗口大小 打开窗口的可用状态(最小化,最大化,正常) 窗口动画
-
jQuery实现单击按钮遮罩弹出对话框效果（2）
本文实例为大家分享了jQuery实现弹出对话框的具体实现代码,供大家参考,具体内容如下 首先,这里的引用jquery-1.4.4.min.js和jquery.XYTipsWindow.min.2.8.js这两个js,还有一个jquery.XYTipsWindow.2.8.css话不多说,这里直接上代码,留着以后备用. <html> <head> <meta http-equiv="Content-Type" content="text/html;
-
jQuery实现点击按钮弹出可关闭层的浮动层插件
本文实例讲述了jQuery实现点击按钮弹出可关闭层的浮动层插件.分享给大家供大家参考.具体如下: 这是一款由漫画Jquery弹出层插件改编而来,小鸟Js弹窗插件,按ESC可以关闭窗口.默认不带样式,大家可以根据自己的项目写样式.弹出层代码很小,min版的只1.15k,因为小所以值得应用.希望有网友可以再改进,希望她变得更小. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/js-close-able-alert-dlg-plug-codes/ 具
-
jQuery点击按钮弹出遮罩层且内容居中特效
本文为大家分享了jQuery点击按钮弹出遮罩层且内容居中的特效,下面来看最终实现的效果: 由于是测试的程序,所以我未加关闭的按钮. 一.主体程序 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>弹出居中遮罩</title> <meta name="viewport" content="width=devi
-
jQuery实现单击按钮遮罩弹出对话框效果（1）
本文实例为大家分享了jQuery实现单击按钮遮罩弹出对话框的具体代码,供大家参考,具体内容如下 看到网上一位大神的代码后,大概进行了注释,调试了一下页面以后感觉不错,留作以后使用. 主要用到了:/jquery-1.10.2.min.js 代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <tit
-
jQuery实现单击按钮遮罩弹出对话框效果(1)
本文实例为大家分享了jQuery实现单击按钮遮罩弹出对话框的具体代码,供大家参考,具体内容如下 看到网上一位大神的代码后,大概进行了注释,调试了一下页面以后感觉不错,留作以后使用.主要用到了:/jquery-1.10.2.min.js代码如下: <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title
-
jQuery实现单击按钮遮罩弹出对话框效果(2)
本文实例为大家分享了jQuery实现弹出对话框的具体实现代码,供大家参考,具体内容如下 首先,这里的引用jquery-1.4.4.min.js和jquery.XYTipsWindow.min.2.8.js这两个js,还有一个jquery.XYTipsWindow.2.8.css话不多说,这里直接上代码,留着以后备用. <html> <head> <meta http-equiv="Content-Type" content="text/html;
-
jQuery实现的AJAX简单弹出层效果代码
本文实例讲述了jQuery实现的AJAX简单弹出层效果.分享给大家供大家参考,具体如下: 运行效果截图如下: 具体代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/
-
jquery实现简单实用的弹出层效果代码
本文实例讲述了jquery实现简单实用的弹出层效果.分享给大家供大家参考.具体如下: 目前来说,我还是喜欢这个自己改造的弹出层,在项目中用的也是这个.引入了新版的jquery插件,方框及文字都可以自己定义,非常方便,希望大家也喜欢这款弹出层,JavaScript在本例中也充分发挥了作用,对学习JS也是不错的参考. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-simple-alert-style-demo/ 具体代码如下: <!D
-
Android 之BottomsheetDialogFragment仿抖音评论底部弹出对话框效果(实例代码)
实现的效果图: 自定义Fragment继承BottomSheetDialogFragment 重写它的三个方法: onCreateDialog() onCreateView() onStart() 他们的执行顺序是从上到下 import android.app.Dialog; import android.content.Context; import android.graphics.Color; import android.graphics.drawable.ColorDrawable;
-
jquery+css3实现的经典弹出层效果示例
本文实例讲述了jquery+css3实现的弹出层效果.分享给大家供大家参考,具体如下: 可能出现的情况 1)一列都有,按顺序弹出对应的弹出层 2)只有单个一个弹出层 3)不按顺序不按规律随机弹出层 jquery 弹出层 解决 第一种情况 参考资料 移动端之"CSS3多动画弹框" 引入jquery JS代码 这里关闭用的css3效果实现 <script type="text/javascript"> var w,h,className; function
-
jQuery在iframe中无法弹出对话框的解决方法
jQuery的弹出框使用很方便,但是如果在iframe中使用则弹不出对话框,而有时候我们还必须得使用iframe而不能用jQuery的load方式,这个时候就需要处理这个问题. 其实也非常简单,思路就是让iframe的父窗口弹出这个对话框.例如: parent.confirmDialog(); 这样就可以用了.不是什么有技术含量的问题,记下来,防止忘记.