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 相关文章推荐
jquery+ajax每秒向后台发送请求数据然后返回页面的代码
Jan 17 Javascript
深入理解JavaScript编程中的同步与异步机制
Jun 24 Javascript
jquery+css实现绚丽的横向二级下拉菜单-附源码下载
Aug 23 Javascript
jqGrid表格应用之新增与删除数据附源码下载
Dec 02 Javascript
js 动态给元素添加、移除事件的实现方法
Jul 19 Javascript
浅析Ajax语法
Dec 05 Javascript
jquery操作select取值赋值与设置选中实例
Feb 28 Javascript
vue axios同步请求解决方案
Sep 29 Javascript
axios取消请求的实践记录分享
Sep 26 Javascript
JavaScript实现汉字转换为拼音及缩写的方法示例
Mar 28 Javascript
Angular.JS读取数据库数据调用完整实例
Jul 02 Javascript
详解JavaScript中Arguments对象用途
Aug 30 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
如何限制访问者的ip(PHPBB的代码)
2006/10/09 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
PHP基于DateTime类解决Unix时间戳与日期互转问题【针对1970年前及2038年后时间戳】
2018/06/13 PHP
PHP的mysqli_rollback()函数讲解
2019/01/23 PHP
JavaScript 高级篇之函数 (四)
2012/04/07 Javascript
JavaScript实现重置表单(reset)的方法
2015/04/02 Javascript
javascript数组克隆简单实现方法
2015/12/16 Javascript
jQuery插件dataTables添加序号列的方法
2016/07/06 Javascript
js 获取范围内的随机数实例代码
2016/08/02 Javascript
jquery拖动改变div大小
2017/07/04 jQuery
浅谈angular.copy() 深拷贝
2017/09/14 Javascript
JavaScript实现的原生态Tab标签页功能【兼容IE6】
2017/09/18 Javascript
Js中async/await的执行顺序详解
2017/09/22 Javascript
浅谈ajax请求不同页面的微信JSSDK问题
2018/02/26 Javascript
angularjs 的数据绑定实现原理
2018/07/02 Javascript
webpack4.x CommonJS模块化浅析
2018/11/09 Javascript
Vue-drag-resize 拖拽缩放插件的使用(简单示例)
2019/12/04 Javascript
springboot+vue+对接支付宝接口+二维码扫描支付功能(沙箱环境)
2020/10/15 Javascript
[03:09]显微镜下的DOTA2第一期——带你走进华丽的DOTA2世界
2014/06/20 DOTA
Python基于有道实现英汉字典功能
2015/07/25 Python
python中判断文件编码的chardet(实例讲解)
2017/12/21 Python
python调用API实现智能回复机器人
2018/04/10 Python
Python查找最长不包含重复字符的子字符串算法示例
2019/02/13 Python
python3模拟实现xshell远程执行liunx命令的方法
2019/07/12 Python
python实现通过flask和前端进行数据收发
2019/08/22 Python
python实现的汉诺塔算法示例
2019/10/23 Python
有关Tensorflow梯度下降常用的优化方法分享
2020/02/04 Python
基于Python词云分析政府工作报告关键词
2020/06/02 Python
python缩进长度是否统一
2020/08/02 Python
python help函数实例用法
2020/12/06 Python
CSS Grid布局教程之网格单元格布局
2014/12/30 HTML / CSS
澳大利亚优惠网站:Deals.com.au
2019/07/02 全球购物
介绍一下UNIX启动过程
2013/11/14 面试题
教师党的群众路线对照检查材料
2014/09/24 职场文书
党的群众路线教育实践活动心得体会(医院)
2014/11/03 职场文书
ORACLE查看当前账号的相关信息
2021/06/18 Oracle