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 相关文章推荐
javascript读取RSS数据
Jan 20 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
Jun 11 Javascript
jquery 年会抽奖程序
Dec 22 Javascript
js创建对象的区别示例介绍
Jul 24 Javascript
5个数组Array方法: indexOf、filter、forEach、map、reduce使用实例
Jan 29 Javascript
JS实现仿中关村论坛评分后弹出提示效果的方法
Feb 23 Javascript
JS实现的数组全排列输出算法
Mar 19 Javascript
JS获得图片alt信息的方法
Apr 01 Javascript
easyui-combobox 实现简单的自动补全功能示例
Nov 08 Javascript
微信小程序之小豆瓣图书实例
Nov 30 Javascript
JS实现基于Sketch.js模拟成群游动的蝌蚪运动动画效果【附demo源码下载】
Aug 18 Javascript
vue中component组件的props使用详解
Sep 04 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
php下删除一篇文章生成的多个静态页面
2010/08/08 PHP
利用php绘制饼状图的实现代码
2013/06/07 PHP
Linux下PHP安装mcrypt扩展模块笔记
2014/09/10 PHP
PHP单例模式是什么 php实现单例模式的方法
2016/05/14 PHP
DOMAssitant最新版 DOMAssistant 2.5发布
2007/12/25 Javascript
javascript 解决表单仍然提交即使监听处理函数返回false
2010/03/14 Javascript
基于Jquery的开发个代阴影的对话框效果代码
2011/07/28 Javascript
JavaScript 动态加载脚本和样式的方法
2015/04/13 Javascript
javascript实现别踩白块儿小游戏程序
2015/11/22 Javascript
JSON遍历方式实例总结
2015/12/07 Javascript
js简单倒计时实现代码
2016/04/30 Javascript
JavaScript兼容性总结之获取非行间样式案例
2016/08/07 Javascript
Node.js中如何合并两个复杂对象详解
2016/12/31 Javascript
微信小程序实现折叠与展开文章功能
2018/06/12 Javascript
基于webpack4搭建的react项目框架的方法
2018/06/30 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
vuejs使用axios异步访问时用get和post的实例讲解
2018/08/09 Javascript
JavaScript文本特效实例小结【3个示例】
2018/12/22 Javascript
Vue中关闭弹窗组件时销毁并隐藏操作
2020/09/01 Javascript
JavaScript实现五子棋小游戏
2020/10/26 Javascript
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
对python中使用requests模块参数编码的不同处理方法
2018/05/18 Python
ubuntu17.4下为python和python3装上pip的方法
2018/06/12 Python
python 协程中的迭代器,生成器原理及应用实例详解
2019/10/28 Python
Python 实现日志同时输出到屏幕和文件
2020/02/19 Python
解决html5中video标签无法播放mp4问题的办法
2017/05/07 HTML / CSS
经济实惠的名牌太阳镜和眼镜:Privé Revaux
2021/02/07 全球购物
数据库什么时候应该被重组
2012/11/02 面试题
Java语言程序设计测试题判断题部分
2013/01/06 面试题
七一讲话心得体会
2014/09/05 职场文书
领导个人查摆剖析材料
2014/10/29 职场文书
大学学生会辞职信
2015/05/13 职场文书
工作态度怎么写
2015/06/25 职场文书
圣诞晚会主持词
2015/07/01 职场文书
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers