Js Jquery创建一个弹出层可加载一个页面


Posted in Javascript onMay 08, 2014
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
<title> New Document </title> 
<script type="text/javascript" src="../jquery-1.7.2.js"></script> 
<script type="text/javascript"> 
//创建一个弹出层,title 标题,width 宽度,height 高度,content 内容,url 如果url不为空时则覆盖content加载url页面中的内容 
function CreatePopLayerDiv(title,width,height,content,url){ 
var titles = title || "标题"; 
var Iheight=$(window).height(); 
var Iwidth =$(window).width(); 
var heights = height || 300; 
var widths = width || 500; 
var Oheight= (Iheight -heights) / 2; 
var Owidth = (Iwidth - widths) /2; 
var contents = content || "内容"; 
var div = "<div id='InDiv' style='width:"+Iwidth+"px;height:"+Iheight+"px;background-color:#888;position:absolute;z-index:10000;top:0;left:0;opacity:0.7;'><div id='offDiv' style='width:"+widths+"px;height:"+heights+"px;left:"+Owidth+"px;top:"+Oheight+"px;background-color:white;position:absolute;z-index:10001;'><h4 id='HTitle' style='margin:0px;padding:3px;background:#336699;opacity:0.9;border:1px solid ##336699;height:20px;line-height:20px;font:12px Verdana, Geneva, Arial, Helvetica, sans-serif;color:white;cursor:pointer;text-align:left;'>"+titles+"<a id='AClose' onclick='btnCloses()' style='float:right;'>关闭</a></h4><div id='Content'>"+contents+"</div></div></div>"; 
$(document.body).append(div); 
if(url != ""){ 
$("#Content").load(url); 
} 
} 
//移除弹出层 
function RemoveDiv(){ 
$("#AClose").remove(); 
$("#HTitle").remove(); 
$("#offDiv").remove(); 
$("#InDiv").remove(); 
} 
$(function(){ 
$("#btnTCC").click(function(){ 
CreatePopLayerDiv("闪耀的瞬间",600,400,"弹出层","table偶数行变色.html"); 
}); 
}) 
function btnCloses(){ 
RemoveDiv(); 
} 
</script> 
</head> 
<body> 
<input type="button" id="btnTCC" value="弹出层" /> 
</body> 
</html>
Javascript 相关文章推荐
javascript编程起步(第五课)
Jan 10 Javascript
教您去掉ie网页加载进度条的方法
Dec 09 Javascript
Prototype源码浅析 String部分(三)之HTML字符串处理
Jan 15 Javascript
js对象转json数组的简单实现案例
Feb 28 Javascript
原生javascript实现图片无缝滚动效果
Feb 12 Javascript
悬浮广告方法日常收集整理
Mar 18 Javascript
angular分页指令操作
Jan 09 Javascript
解决浏览器会自动填充密码的问题
Apr 28 Javascript
JavaScript实现二叉树的先序、中序及后序遍历方法详解
Oct 26 Javascript
Vue.js进阶知识点总结
Apr 01 Javascript
微信JSSDK实现打开摄像头拍照再将相片保存到服务器
Nov 15 Javascript
vue实现随机验证码功能(完整代码)
Dec 10 Javascript
一个html5播放视频的video控件只支持android的默认格式mp4和3gp
May 08 #Javascript
js 设置缓存及获取设置的缓存
May 08 #Javascript
javascript实现的一个带下拉框功能的文本框
May 08 #Javascript
javascript解析json数据的3种方式
May 08 #Javascript
Javascript异步编程模型Promise模式详细介绍
May 08 #Javascript
JS获取随机数函数可自定义最小值最大值
May 08 #Javascript
js数组操作常用方法
May 08 #Javascript
You might like
PHP配置文件中最常用四个ini函数
2007/03/19 PHP
使用PHP获取当前url路径的函数以及服务器变量
2013/06/29 PHP
php校验表单检测字段是否为空的方法
2015/03/20 PHP
thinkphp框架下实现登录、注册、找回密码功能
2016/04/06 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
PHP反射原理与用法深入分析
2019/09/28 PHP
javascript 控制 html元素 显示/隐藏实现代码
2009/09/01 Javascript
JavaScript高级程序设计(第3版)学习笔记4 js运算符和操作符
2012/10/11 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
BOOTSTRAP时间控件显示在模态框下面的bug修复
2015/02/05 Javascript
JavaScript在浏览器标题栏上显示当前日期和时间的方法
2015/03/19 Javascript
JavaScript 七大技巧(一)
2015/12/13 Javascript
深入理解angularjs过滤器
2016/05/25 Javascript
利用jQuery实现滑动开关按钮效果(附demo源码下载)
2017/02/07 Javascript
详解Vue2.0之去掉组件click事件的native修饰
2017/04/20 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
Vue实现自定义下拉菜单功能
2018/07/16 Javascript
Fetch超时设置与终止请求详解
2019/05/18 Javascript
学习RxJS之JavaScript框架Cycle.js
2019/06/17 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
2019/07/20 Javascript
[02:38]DOTA2亚洲邀请赛 IG战队巡礼
2015/02/03 DOTA
跟老齐学Python之大话题小函数(2)
2014/10/10 Python
理解Python中函数的参数
2015/04/27 Python
Python检测QQ在线状态的方法
2015/05/09 Python
PyCharm在win10的64位系统安装实例
2017/11/26 Python
python与sqlite3实现解密chrome cookie实例代码
2018/01/20 Python
python爬虫之xpath的基本使用详解
2018/04/18 Python
快速解决pandas.read_csv()乱码的问题
2018/06/15 Python
Django CSRF认证的几种解决方案
2020/03/03 Python
python 6.7 编写printTable()函数表格打印(完整代码)
2020/03/25 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
关于CSS Tooltips(鼠标经过时显示)的效果
2013/04/10 HTML / CSS
EJB3.1都有哪些改进
2012/11/17 面试题
Java中的异常处理机制的简单原理和应用
2013/04/27 面试题
推广活动策划方案
2014/08/23 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书