基于jQuery实现弹出可关闭遮罩提示框实例代码

2024-09-29 19:33:06

jquery CSS3遮罩弹出层动画效果，使用非常简单，就两个标签，里面自定义内容和样式，四种常见效果，懂的朋友还可以修改源代码修改成自己想要的效果

先给大家展示下效果图，如果大家感觉还不错，请参考实现代码。

关键代码如下所示：

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"><meta name="viewport" content="width=device-width, initial-scale=1" />
<title>JQuery-CSS3制作简洁的弹框_何问起</title>
<script type="text/javascript" src="http://down.hovertree.com/jquery/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="http://hovertree.com/texiao/jquery/85/style.css">
<style>.hovertreeinfo{text-align:center;}.hovertreeinfo a{color:blue}</style>
</head>
<body>
<div class="hovertreeinfo"><h2>jquery CSS3制作简洁遮罩弹出层动画</h2>
几种常见的简洁弹框</div>
<div class="checkbox">
<a href="javascript:0;" class="cd-popup-trigger0">样式1</a>
<a href="javascript:0;" class="cd-popup-trigger1">样式2</a>
<a href="javascript:0;" class="cd-popup-trigger2">样式3</a>
<a href="javascript:0;" class="cd-popup-trigger3">样式4</a>
</div>
<!--弹框-->
<div class="cd-popup">
<div class="cd-popup-container">
<p>何问起</p>
<div class="cd-buttons">
自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了
</div>
<a href="javascript:;" class="cd-popup-close">close</a>
</div>
</div>
<div class="cd-popup1">
<div class="cd-popup-container1">
<p>何问起</p>
<div class="cd-buttons">
自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了,更多特效：<a href="http://hovertree.com/texiao/" target="_blank">http://hovertree.com/texiao/</a>
</div>
<a href="javascript:;" class="cd-popup-close">close</a>
</div>
</div>
<div class="cd-popup2">
<div class="cd-popup-container2">
<p>何问起</p>
<div class="cd-buttons">
自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了
</div>
<a href="javascript:;" class="cd-popup-close">close</a>
</div>
</div>
<div class="cd-popup3">
<div class="cd-popup-container3">
<p>何问起</p>
<div class="cd-buttons">
自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了
</div>
<a href="javascript:;" class="cd-popup-close">close</a>
</div>
</div>
<div class="hovertreeinfo"><a href="http://hovertree.com" target="_blank">何问起</a>
<a href="http://hovertree.com/menu/texiao/" target="_blank">网页特效</a>
<a href="http://hovertree.com/h/bjaf/0ai05muy.htm" target="_blank">代码说明</a></div>
<script type="text/javascript">
/*弹框JS内容*/
jQuery(document).ready(function($){
//打开窗口
$('.cd-popup-trigger0').on('click', function(event){
event.preventDefault();
$('.cd-popup').addClass('is-visible');
//$(".dialog-addquxiao").hide()
});
//关闭窗口
$('.cd-popup').on('click', function(event){
if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup') ) {
event.preventDefault();
$(this).removeClass('is-visible');
}
});
//ESC关闭
$(document).keyup(function(event){
if(event.which=='27'){
$('.cd-popup').removeClass('is-visible');
}
});
//打开窗口
$('.cd-popup-trigger1').on('click', function(event){
event.preventDefault();
$('.cd-popup1').addClass('is-visible1');
//$(".dialog-addquxiao").hide()
});
//关闭窗口
$('.cd-popup1').on('click', function(event){
if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup1') ) {
event.preventDefault();
$(this).removeClass('is-visible1');
}
});
//ESC关闭
$(document).keyup(function(event){
if(event.which=='27'){
$('.cd-popup1').removeClass('is-visible1');
}
});
//打开窗口 by 何问起
$('.cd-popup-trigger2').on('click', function(event){
event.preventDefault();
$('.cd-popup2').addClass('is-visible2');
//$(".dialog-addquxiao").hide()
});
//关闭窗口
$('.cd-popup2').on('click', function(event){
if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup2') ) {
event.preventDefault();
$(this).removeClass('is-visible2');
}
});
//ESC关闭
$(document).keyup(function(event){
if(event.which=='27'){
$('.cd-popup2').removeClass('is-visible2');
}
});
//打开窗口
$('.cd-popup-trigger3').on('click', function(event){
event.preventDefault();
$('.cd-popup3').addClass('is-visible3');
//$(".dialog-addquxiao").hide()
});
//关闭窗口
$('.cd-popup3').on('click', function(event){
if( $(event.target).is('.cd-popup-close') || $(event.target).is('.cd-popup3') ) {
event.preventDefault();
$(this).removeClass('is-visible3');
}
});
//ESC关闭
$(document).keyup(function(event){
if(event.which=='27'){
$('.cd-popup3').removeClass('is-visible3');
}
});
});
</script>
</body>
</html>

以上所述是小编给大家介绍的基于jQuery实现弹出可关闭遮罩提示框实例代码，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

jQuery带箭头提示框tooltips插件集锦

摘要: 之前给大家介绍过用CSS来实现带箭头的提示框,今天我们来点不太一样的,本文将分享几款带箭头提示框. qtip qTip是一种先进的提示插件,基于jQuery框架.以用户友好,而且功能丰富,qTip为您提供不一般的功能,如圆角和语音气泡提示,并且最重要的是免费.支持ie6+以及其他主流浏览器 grumble.js grumble.js提供了特殊的提示,北/东/南/西定位的一般限制.可以围绕一个给定的元素以任意角度旋转,任何距离可以被指定,任何CSS样式可以应用.自动尺寸调整为本地化的文本使
使用jQuery制作遮罩层弹出效果的极简实例分享

客户的网站上突然需要一个遮罩弹窗效果,也可以称作暗箱之类的,具体效果就是网页中背景变成半透明,然后在屏幕中间出现一个菜单之类的东西.这种效果在网上很常见,例如:QQ空间浏览相册等.这种效果的好处就是,可以让用户聚焦到弹出的菜单中. 神说,有代码的文章,应该有个 Demo ,于是就有了Demo. HTML 结构首先先来分析一下这个过程:触发某个事件(例如点击按钮),然后出现一个背景遮罩上面还有一个内容层.触发的按钮,我在这里用 div 来代替,并且使用 click 点击事件来演示.那么我们的 H
jQuery+html5实现div弹出层并遮罩背景

渐入弹窗,背景变色不可点击.查看效果:http://runjs.cn/detail/t08gmoij <!doctype html> <html> <head> <meta charset="utf-8"> <title>popup</title> <script type="text/javascript" src="jquery-2.1.3.min.js">&
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
jQuery学习笔记(2)--用jquery实现各种模态提示框代码及项目构架

好久以来就想实现一个模态的框框,找了很多的jquery插件,都没有碰到自己满意的,这次碰到了一个,但是由于还处于开发阶段吧,连个文档API都没有,自己摸索了好长一段时间才搞定. 先来看看代码,本人看着源代码定制了自己想要的效果: 复制代码代码如下: <%@ page language="java"contentType="text/html; charset=utf-8" pageEncoding="utf-8"%> <!DO
jQuery实现简单网页遮罩层/弹出层效果兼容IE6、IE7

本屌丝最近工作要求重写网站所有代码,so...极其蛋疼的事情出现了,管我的人要求不能用网上的插件,oh~~~my god!! 这是多么能让千万只草原上的马儿奔腾的要求~~~ 先实现一个比较简单的功能: 需求:网页遮罩层/弹出层,兼容IE6 幸好本屌丝以前聪明收集了个js的版本,so,自己改写成了jQuery插件形式的,方便以后使用. 屁话不多放,无码无真相! 复制代码代码如下: /******************************* * @name Layer跨浏览器兼容插件 v1.
jquery实现鼠标滑过显示提示框的方法

本文实例讲述了jquery实现鼠标滑过显示提示框的方法.分享给大家供大家参考.具体如下: 一.jquery鼠标滑过显示提示框实例 1.效果图 2.实现代码 ( 需要自行添加 jquery.js.按钮图片.提示框图片 ) HTML 代码复制代码代码如下: <!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF
jquery做的一个简单的屏幕锁定提示框

复制代码代码如下: <!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/xhtml"> <head> <meta http-equiv=&qu
基于jQuery实现弹出可关闭遮罩提示框实例代码

jquery CSS3遮罩弹出层动画效果,使用非常简单,就两个标签,里面自定义内容和样式,四种常见效果,懂的朋友还可以修改源代码修改成自己想要的效果先给大家展示下效果图,如果大家感觉还不错,请参考实现代码. 效果演示关键代码如下所示: <!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&quo
基于jQuery的弹出消息插件 DivAlert之旅（一）

想着自己学习Javascript,以及Ajax.jQuery等已经有一段时间了,不过貌似还没有写过一个插件,看到jQuery官网上那么多令人眼前一亮的插件,自己今天也动心说是不是能够写一个类似的插件来瞧瞧,了解了jQuery插件的基本格式,理一下基本的思路,动工吧... 这个DivAlert插件,顾名思义就是页面弹出框,也就相当于Winform里面MessageBox.Show()那样的东西. 首先,我们来定义一下一些最基本的参数: 插件初始化复制代码代码如下: (function($) {
jquery弹出遮掩层效果【附实例代码】

找了个别人写的遮掩层进行改善,感觉效果还可以. 效果图: 代码: <!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/xhtml"> <head> &
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码

1. 测试环境 JQuery-3.2.1.min.j Bootstrap-3.3.7-dist win7 1.2. 实践 HTML代码片段 <div class="container-fluid"> <div class="row">  <div class="col-xs-2 col-sm-2 col-md-2 col-lg-2"> <div class
JS控制弹出悬浮窗口(一览画面)的实例代码

在web项目开发中经常遇到在一览画面中用户需要查看某一条记录的详细信息.如果用迁移画面的方式处理,速度会比较慢,而且用户体验不是太好.如果采用点击该条记录的详细链接时弹出一个层显示在当前画面的话,处理速度很快,而且用户感觉也比较新颖.下面我以某个对日电子商务网站为实例说明下它的实现方式. 1.jsp页面上弹出层的代码  <s:iterator value="lrVo" var="lrVo" id=&qu
基于jQuery的弹出框插件

html如下: 复制代码代码如下: <!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/xhtml"> <head> <meta http-e
AeroWindow 基于JQuery的弹出窗口插件

可以一个页面中创建多个弹出窗,被选中的弹出窗会加亮显示,在同一网页中可以有多个弹出窗口,也可以通过双击窗口实现最大化,跟windows像极了.如果想要做一个类似操作系统的页面,用这个插件是完全可以实现的.兼容多种主流浏览器. 最基础的调用方法: 复制代码代码如下: $('#YourContainerDiv').AeroWindow((WindowTitle:'hello world',)); 带全部参数的调用: 复制代码代码如下: $('#YourContainerDiv').AeroWin
boxy基于jquery的弹出层对话框插件扩展应用弹出层选择器

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

原理很简单: 获取当前屏幕(窗体)的宽度和高度,因为不同浏览器的窗体大小是不一样的.有了这个,可以计算出来垂直居中的坐标.但是滑动了滚动条怎么依然垂直居中呢?这个时候就要获取当前窗体距离页面顶部的高度,加到刚刚的y轴坐标即可. $(document)是获取整个网页的,$(window)是获取当前窗体的,这个要搞清楚. 最后把获取的坐标赋给窗体即可,窗体本身是绝对定位的,所以自然可以到窗体中间. 具体代码: 复制代码代码如下: <!DOCTYPE HTML> <html> <
基于jQuery的弹出隐藏层的窗口特效

运行效果后,点击菜单,会弹出一个注册表单,类似于很多论坛的用户注册及登录功能那样,目前还是挺流行的. 弹出层 $(document).ready(function(){ $("#button_2").click(function(){ $("#message").hide(); }); $("#message_show").click(function(){ $("#message").show(); }); $("

基于jQuery实现弹出可关闭遮罩提示框实例代码

相关推荐

随机推荐