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中增加参数与Json转换代码
Nov 20 Javascript
用Javascript实现Windows任务管理器的代码
Mar 27 Javascript
javascript 二进制运算技巧解析
Nov 27 Javascript
js弹出层永远居中实现思路及代码
Nov 29 Javascript
JSON.parse()和JSON.stringify()使用介绍
Jun 20 Javascript
jquery实现仿JqueryUi可拖动的DIV实例
Jul 31 Javascript
Bootstrap table表格简单操作
Feb 07 Javascript
js读取json文件片段中的数据实例
Mar 09 Javascript
在Vant的基础上实现添加表单验证框架的方法示例
Dec 05 Javascript
前端面试知识点目录一览
Apr 15 Javascript
vue router导航守卫(router.beforeEach())的使用详解
Apr 19 Javascript
vue 实现搜索的结果页面支持全选与取消全选功能
May 10 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/05/26 PHP
WordPress迁移时一些常见问题的解决方法整理
2015/11/24 PHP
swoole和websocket简单聊天室开发
2017/11/18 PHP
PHP getID3类的使用方法学习笔记【附getID3源码下载】
2019/10/18 PHP
JavaScript语法着色引擎(demo及打包文件下载)
2007/06/13 Javascript
Tips 带三角可关闭的文字提示
2010/10/06 Javascript
js获取 type=radio 值的方法
2014/05/09 Javascript
使用js画图之饼图
2015/01/12 Javascript
jQuery实现的感应鼠标悬停图片色彩渐显效果
2015/03/03 Javascript
JavaScript代码因逗号不规范导致IE不兼容的问题
2016/02/25 Javascript
AngularJS入门教程之链接与图片模板详解
2016/08/19 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
jQuery实现table表格checkbox全选的方法分析
2018/07/04 jQuery
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
mpvue小程序循环动画开启暂停的实现方法
2019/05/15 Javascript
VsCode与Node.js知识点详解
2019/09/05 Javascript
关于vue路由缓存清除在main.js中的设置
2019/11/06 Javascript
解决Element中el-date-picker组件不回填的情况
2020/11/07 Javascript
vue实现登录、注册、退出、跳转等功能
2020/12/23 Vue.js
Python实现微信公众平台自定义菜单实例
2015/03/20 Python
Python实现的朴素贝叶斯算法经典示例【测试可用】
2018/06/13 Python
python清除字符串前后空格函数的方法
2018/10/21 Python
Python3 导入上级目录中的模块实例
2019/02/16 Python
用python生成(动态彩色)二维码的方法(使用myqr库实现)
2019/06/24 Python
python自动化测试之DDT数据驱动的实现代码
2019/07/23 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
后端开发使用pycharm的技巧(推荐)
2020/03/27 Python
html5+svg学习指南之SVG基础知识
2014/12/17 HTML / CSS
详解如何用HTML5 Canvas API控制图片的缩放变换
2016/03/22 HTML / CSS
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
先进事迹演讲稿
2014/09/01 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
派出所正风肃纪剖析材料
2014/10/10 职场文书
2015年宣传部工作总结范文
2015/03/31 职场文书
公司放假通知怎么写
2015/04/15 职场文书
Python经常使用的一些内置函数
2022/04/11 Python