<!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. JavaScript运算符：递增和递减(++i，--i 和 i++，i-- 的区别)

    递增和递减操作符直接借鉴自C,而且各有两个版本:前置型 (递增 ++i ,递减 --i )和 后置型 (递增 i++ ,递减 i-- ).书本上对两者的定义是:前置型应该位于要操作的变量之前,而后置型 ...

  2. 安装wamp后，127.0.0.1可以访问，localhost不能访问

    今天安装wamp后,127.0.0.1可以访问,localhost不能访问,出现 “error You don't have permission to access”的错误, 网上查了下,很多方法都 ...

  3. 201621123006 《Java程序设计》第11周学习总结

    1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 1. 源代码阅读:多线程程序BounceThread 1.1 BallR ...

  4. js中的reduce()函数

    1. 首先看下语法如下 2 . 写了个demo如下 var fa = [1,2,3,4] function red(a, b) { console.log(arguments); return a + ...

  5. 使用C++实现二叉搜索树的数据结构

    需要注意的地方: ①二叉搜索树删除一个指定结点R,若R为叶子结点,则将R的父结点中指向R的指针改为指向nullptr:若R的左右子结点一个为空,一个非空,则将R的父结点中指向R的指针改为指向R的非空子 ...

  6. c++的c风格字符串函数的实现

    要注意使用断言判断传入的字符串非空. #include <cassert> //求字符串长度 size_t StrLen(const char *str) { assert(str != ...

  7. react中findDOMNode

    在使用react过程中,大家有时会那么这里的findDomNode是做什么的呢? import { findDomNode } from 'react-dom'; 简单来说是用来得到实际Dom的,因为 ...

  8. 收集前端UI框架 持续更新中....

    1. elementUI 饿了么出品 基于Vue2 http://element.eleme.io/#/zh-CN 2. ZUI 开源HTML5跨屏框架  (2018年1月4日更新)一个基于 Boot ...

  9. CH3201 Hankson的趣味题

    题意 3201 Hankson的趣味题 0x30「数学知识」例题 描述 Hanks博士是BT(Bio-Tech,生物技术)领域的知名专家,他的儿子名叫Hankson.现在,刚刚放学回家的Hankson ...

  10. 使用Spec Markdown 编写手册文档

    Spec Markdown 是一个基于markdown 的文档编写工具,安装简单,可以让我们编写出专业的文档 参考项目 https://github.com/rongfengliang/spec-md ...