<!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. css样式中position和_position的区别

    aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA3IAAAEUCAIAAADhh5PYAAAgAElEQVR4nO3dPa/rNoLGcX6dW6UL+B ...

  2. poj 2029 Get Many Persimmon Trees 各种解法都有，其实就是瞎搞不算吧是dp

    连接:http://poj.org/problem?id=2029 题意:给你一个map,然后在上面种树,问你h*w的矩形上最多有几棵树~这题直接搜就可以.不能算是DP 用树状数组也可作. #incl ...

  3. Python Inotify 监视LINUX文件系统事件

    Inotify 可以监视的LINUX文件系统事件包括: --IN_ACCESS,即文件被访问 --IN_MODIFY,文件被write --IN_ATTRIB,文件属性被修改,如chmod.chown ...

  4. 051——VUE中自定义指令：directive

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. HTML5里的placeholder属性

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  6. jquery分页滑动插件（鼠标可控制上下滑动）

    这个插件非常好用 http://www.swiper.com.cn/

  7. bzoj1367

    题解: 左偏树模板题 维护n/2的好多课左偏树 每一次加进来一个点的时候,只有一个点 然后每次中位数比前面小的时候,那么和前面合并 代码: #include<bits/stdc++.h> ...

  8. 简单地为DBNavigator填加Caption

    http://bbs.2ccc.com/topic.asp?topicid=346735 http://www.cnblogs.com/GarfieldTom/archive/2010/01/18/1 ...

  9. Sub-process /usr/bin/dpkg returned an error code (1)解决方法

    在ubuntu下使用apt-get install 安装资源的时候,总是会遇到Sub-process /usr/bin/dpkg returned an error code (1) 错了, 跟安装软 ...

  10. L183 Chinese company unveils first satellite for free WiFi

    A Chinese internet technology company unveiled the first satellite in a constellation plan to provid ...