<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>jquery简洁遮罩弹出层代码</title>
<script type="text/javascript" src="jquery-1.7.2.min.js"></script>
<link rel="stylesheet" href="style.css">
</head>

<body>
<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="#0" class="cd-popup-close">close</a>
</div>
</div>

<div class="cd-popup1">
<div class="cd-popup-container1">
<p>几种常见的简洁弹框</p>
<div class="cd-buttons">
自定义整体容器宽高度及内容，高度可自适应可固定,样式可以定义自己喜欢的样式，这里就不做美观了
</div>
<a href="#0" 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="#0" 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="#0" class="cd-popup-close">close</a>
</div>
</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');
}
});

//打开窗口
$('.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>
<div style="text-align:center;">

</div>

</body>
</html>

query简洁弹出层代码的更多相关文章

  1. 常用的AJAX弹出层代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. jq原创弹出层折叠效果

    弹出层效果很多网站上都用到,今天就整理最近项目里用到的一个小效果,点击折叠弹出一个层给用户填写信息.弹出层代码都是jq动态创建,每个人写法都不一样,需求也不一样,所有选择符合自已的即可. html: ...

  3. 弹出层layer演示 以及在编写弹出层时遇到的错误

    实现的功能: 首先第一步 在官方下载layer的文件.layUI官网:http://layer.layui.com/     http://layer.layui.com/ layer文件的下载步骤如 ...

  4. jquery层居中,点击小图查看大图,弹出层居中代码，顶部层固定不动，滚动条滚动情况

    jquery层居中,点击小图查看大图,弹出层居中代码 http://www.cnblogs.com/simpledev/p/3566280.html 见第一版,发现一个情况,如果页面内容多出一屏的情况 ...

  5. 基于jQuery弹出层图片动画查看代码

    分享一款基于jQuery弹出层图片动画查看代码是一款鼠标单击文字或图片内容放大显示且含圆角投影效果.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div class=&q ...

  6. Js弹出层，弹出框代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  7. jquery层居中,点击小图查看大图,弹出层居中代码

    1.层居中 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w ...

  8. JS简易弹出层

    目标 实现简易的js弹出框.为了简单灵活的在小项目中使用. 实现思路 研究bootstrap的弹出框效果后,认为层级示意图如下: 层说明 弹出层分为三层.最底层的遮罩层,覆盖在浏览器视口上.它之上是弹 ...

  9. JavaScript学习笔记(一)——延迟对象、跨域、模板引擎、弹出层、AJAX示例

    一.AJAX示例 AJAX全称为“Asynchronous JavaScript And XML”(异步JavaScript和XML) 是指一种创建交互式网页应用的开发技术.改善用户体验,实现无刷新效 ...

随机推荐

  1. 【Matplotlib】线设置，坐标显示范围

    改变线的颜色和线宽 参考文章: controlling line properties Line API 线有很多属性你可以设置:线宽,线型,抗锯齿等等:具体请参考matplotlib.lines.L ...

  2. POJ 1426 Find the Multiple 思路,线性同余,搜索 难度:2

    http://poj.org/problem?id=1426 测试了一番,从1-200的所有值都有long long下的解,所以可以直接用long long 存储 从1出发,每次向10*s和10*s+ ...

  3. bzoj2442

    题解: 单调队列+dp f[i]=max(f[j-1]+sum[i]-sum[j]) 然后维护f[j-1]-sum[j]单调性 代码: #include<bits/stdc++.h> us ...

  4. 【LeetCode 144_二叉树_遍历】Binary Tree Preorder Traversal

    解法一:非递归 vector<int> preorderTraversal(TreeNode* root) { vector<int> res; if (root == NUL ...

  5. WIN8.1 PRO RTM VOL.Enterprise.2013.10.17

    Windows 8.1 Pro VL (x64) - DVD (Chinese-Simplified)ISO|Chinese - Simplified|发布日期: 2013/10/17文件名: cn_ ...

  6. tensorflow命令行参数：tf.app.flags.DEFINE_string、tf.app.flags.DEFINE_integer、tf.app.flags.DEFINE_boolean

    tf 中定义了 tf.app.flags.FLAGS ,用于接受从终端传入的命令行参数,相当于对Python中的命令行参数模块optpars(参考:python中处理命令行参数的模块optpars)做 ...

  7. axios请求requestBody和formData

    前言 在vue的后台管理开发中,应需求,需要对信息做一个校验,需要将参数传递两份过去,一份防止在body中,一份防止在formdata中,axios请求会默认将参数放在formdata中进行发送. 对 ...

  8. Html页面Dom对象之Event

    HTML DOM Event 对象 实例 哪个鼠标按钮被点击? 光标的坐标是? 被按的按键的 unicode 是? 相对于屏幕,光标的坐标是? shift 键被按了吗? 哪个元素被点击了? 哪个事件类 ...

  9. 【转】为什么要用GIT而不是SVN

    原文网址:http://www.cnblogs.com/perseus/archive/2012/11/22/2782051.html 使用了近一年的git之后,再使用svn,发现自己svn这种版本管 ...

  10. C# List的深复制

    1.关于深拷贝和浅拷贝 C#支持两种类型:值类型和引用类型 值类型(Value Type):如 char, int, float,枚举类型和结构类型 引用类型(Reference Type):如Cla ...