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 相关文章推荐
JQuery.uploadify 上传文件插件的使用详解 for ASP.NET
Jan 22 Javascript
php图像生成函数之间的区别分析
Dec 06 Javascript
jQuery动态添加、删除元素的方法
Jan 09 Javascript
调用innerHTML之后onclick失效问题的解决方法
Jan 28 Javascript
javascript操作referer详细解析
Mar 10 Javascript
原生 JS Ajax,GET和POST 请求实例代码
Jun 08 Javascript
jQuery焦点图左右转换效果
Dec 12 Javascript
vue实现添加标签demo示例代码
Jan 21 Javascript
慕课网题目之js实现抽奖系统功能
Sep 19 Javascript
Vue中的transition封装组件的实现方法
Aug 13 Javascript
微信小程序授权登陆及每次检查是否授权实例代码
Sep 18 Javascript
jQuery实现验证用户登录
Dec 10 jQuery
一个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中计算时间差的几种方法
2009/12/31 PHP
php和mysql中uft-8中文编码乱码的几种解决办法
2012/04/19 PHP
php 文件上传实例代码
2012/04/19 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
php+ajax实现仿百度查询下拉内容功能示例
2017/10/20 PHP
JS简单的图片放大缩小的两种方法
2013/11/11 Javascript
一个简单的jQuery插件ajaxfileupload.js实现ajax上传文件例子
2014/06/26 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
2014/09/01 Javascript
JavaScript中调用函数的4种方式代码实例
2015/07/08 Javascript
基于jQuery实现仿百度首页选项卡切换效果
2016/05/29 Javascript
AngularJS ng-style中使用filter
2016/09/21 Javascript
Angularjs中三种数据的绑定策略(“@”,“=”,“&amp;”)
2016/12/23 Javascript
正则 js分转元带千分符号详解
2017/03/08 Javascript
node操作mysql数据库实例详解
2017/03/17 Javascript
原生js二级联动效果
2017/06/20 Javascript
Bootstrap实现翻页效果
2017/11/27 Javascript
js实现图片上传并预览功能
2018/08/06 Javascript
Vue.js图片预览插件使用详解
2018/08/27 Javascript
微信小程序 冒泡事件原理解析
2019/09/27 Javascript
JavaScript Html实现移动端红包雨功能页面
2021/01/10 Javascript
python logging 日志轮转文件不删除问题的解决方法
2016/08/02 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
Python 将RGB图像转换为Pytho灰度图像的实例
2017/11/14 Python
Python tkinter实现的图片移动碰撞动画效果【附源码下载】
2018/01/04 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
pip安装时ReadTimeoutError的解决方法
2018/06/12 Python
在Python中关于使用os模块遍历目录的实现方法
2019/01/03 Python
浅谈python str.format与制表符\t关于中文对齐的细节问题
2019/01/14 Python
使用django的objects.filter()方法匹配多个关键字的方法
2019/07/18 Python
TensorFlow设置日志级别的几种方式小结
2020/02/04 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
米兰网婚纱礼服法国网上商店:Milanoo法国
2016/08/20 全球购物
介绍一下HDLC(High-Level Data Link Control)高层数据链路协议
2012/01/21 面试题
Java中采用什么结构来捕获、处理异常?各子句的顺序、功能如何
2013/10/07 面试题
七年级上册语文教学计划
2015/01/22 职场文书
VUE之图片Base64编码使用ElementUI组件上传
2022/04/09 Vue.js