jquery实现简单实用的弹出层效果代码


Posted in Javascript onOctober 15, 2015

本文实例讲述了jquery实现简单实用的弹出层效果。分享给大家供大家参考。具体如下:

目前来说,我还是喜欢这个自己改造的弹出层,在项目中用的也是这个。引入了新版的jquery插件,方框及文字都可以自己定义,非常方便,希望大家也喜欢这款弹出层,JavaScript在本例中也充分发挥了作用,对学习JS也是不错的参考。

运行效果截图如下:

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>
<title>弹出层</title>
<script src="jquery-1.6.2.min.js" type="text/javascript"></script>
<style>
.black_overlay{
 display: none;
 position: absolute;
 top: 0%;
 left: 0%;
 width: 100%;
 height: 100%;
 background-color: black;
 z-index:1001;
 -moz-opacity: 0.8;
 opacity:.80;
 filter: alpha(opacity=80);
}
.white_content {
 display: none;
 position: absolute;
 top: 10%;
 left: 10%;
 width: 80%;
 height: 80%;
 border: 16px solid lightblue;
 background-color: white;
 z-index:1002;
 overflow: auto;
}
.white_content_small {
 display: none;
 position: absolute;
 top: 20%;
 left: 30%;
 width: 40%;
 height: 50%;
 border: 16px solid lightblue;
 background-color: white;
 z-index:1002;
 overflow: auto;
}
</style>
<script type="text/javascript">
//弹出隐藏层
function ShowDiv(show_div,bg_div){
 document.getElementById(show_div).style.display='block';
 document.getElementById(bg_div).style.display='block' ;
 var bgdiv = document.getElementById(bg_div);
 bgdiv.style.width = document.body.scrollWidth; 
 // bgdiv.style.height = $(document).height();
 $("#"+bg_div).height($(document).height());
};
//关闭弹出层
function CloseDiv(show_div,bg_div)
{
 document.getElementById(show_div).style.display='none';
 document.getElementById(bg_div).style.display='none';
};
</script>
</head>
<body>
<input id="Button1" type="button" value="点击弹出层" onclick="ShowDiv('MyDiv','fade')" />
<!--弹出层时背景层DIV-->
<div id="fade" class="black_overlay">
</div>
 <div id="MyDiv" class="white_content">
  <div style="text-align: right; cursor: default; height: 40px;">
   <span style="font-size: 16px;" onclick="CloseDiv('MyDiv','fade')">关闭</span>
  </div>
  目前来说,我还是喜欢这个自己改造的弹出层。自己在项目中也用的是这个。
 </div>
</body>
</html>

希望本文所述对大家的jquery程序设计有所帮助。

Javascript 相关文章推荐
js中将多个语句写成一个语句的两种方法小结
Dec 08 Javascript
jQuery EasyUI API 中文文档 - TimeSpinner时间微调器
Oct 23 Javascript
JS 仿腾讯发表微博的效果代码
Dec 25 Javascript
$.each遍历对象、数组的属性值并进行处理
Jul 18 Javascript
JS获取表格内指定单元格html内容的方法
Mar 31 Javascript
jquery左右全屏大尺寸多图滑动效果代码分享
Aug 28 Javascript
jQuery网页定位导航特效实现方法
Dec 19 Javascript
JavaScript中捕获与冒泡详解及实例
Feb 03 Javascript
Vue项目引进ElementUI组件的方法
Nov 11 Javascript
Vue.js+cube-ui(Scroll组件)实现类似头条效果的横向滚动导航条
Jun 24 Javascript
在Node.js中将SVG图像转换为PNG,JPEG,TIFF,WEBP和HEIF格式的方法
Aug 22 Javascript
vue.js的状态管理vuex中store的使用详解
Nov 08 Javascript
简单谈谈node.js 版本控制 nvm和 n
Oct 15 #Javascript
jQuery实现仿QQ在线客服效果的滚动层代码
Oct 15 #Javascript
JS实现选中当前菜单后高亮显示的导航条效果
Oct 15 #Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 #Javascript
JS利用cookie记忆当前位置的防刷新导航效果
Oct 15 #Javascript
如何实现移动端浏览器不显示 pc 端的广告
Oct 15 #Javascript
JS简单限制textarea内输入字符数量的方法
Oct 14 #Javascript
You might like
用缓存实现静态页面的测试
2006/12/06 PHP
深入apache配置文件httpd.conf的部分参数说明
2013/06/28 PHP
PHP中redis的用法深入解析
2014/02/20 PHP
php实现模拟post请求用法实例
2015/07/11 PHP
PHP用户注册邮件激活账户的实现代码
2017/05/31 PHP
ThinkPHP5.0框架控制器继承基类和自定义类示例
2018/05/25 PHP
laravel orm 关联条件查询代码
2019/10/21 PHP
javascript div 遮罩层封锁整个页面
2009/07/10 Javascript
PPK 谈 JavaScript 的 this 关键字 [翻译]
2009/09/29 Javascript
选择TreeView控件的树状数据节点的JS方法(jquery)
2010/02/06 Javascript
分析Node.js connect ECONNREFUSED错误
2013/04/09 Javascript
判断是否安装flash player及当前版本的JS代码
2013/08/08 Javascript
js获取微信版本号的方法
2015/05/12 Javascript
javascript函数特点实例分析
2015/05/14 Javascript
浅谈jQuery.easyui的datebox格式化时间
2015/06/25 Javascript
JS实现的不规则TAB选项卡效果代码
2015/09/18 Javascript
基于jquery实现鼠标滚轮驱动的图片切换效果
2015/10/26 Javascript
js指定步长实现单方向匀速运动
2017/07/17 Javascript
关于在vue 中使用百度ueEditor编辑器的方法实例代码
2018/09/14 Javascript
Vue结合后台导入导出Excel问题详解
2019/02/19 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
2019/04/25 Javascript
layui输入框中只允许输入整数的实现方法
2019/09/18 Javascript
JavaScript setInterval()与setTimeout()计时器
2019/12/27 Javascript
JS removeAttribute()方法实现删除元素的某个属性
2021/01/11 Javascript
python调用新浪微博API项目实践
2014/07/28 Python
Python调用C语言的实现
2019/07/26 Python
python实现斗地主分牌洗牌
2020/06/22 Python
Python 如何操作 SQLite 数据库
2020/08/17 Python
美国中小型企业领先的办公家具供应商:Office Designs
2016/11/26 全球购物
个人评价范文分享
2014/01/11 职场文书
3.15国际消费者权益日主题活动活动总结
2014/03/16 职场文书
2014年军人思想汇报范文
2014/10/12 职场文书
银行先进个人总结
2015/02/15 职场文书
导游词之山东八大关
2019/12/18 职场文书
Java方法重载和方法重写的区别到底在哪?
2021/06/11 Java/Android
vue判断按钮是否可以点击
2022/04/09 Vue.js