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 相关文章推荐
简单漂亮的js弹窗可自由拖拽且兼容大部分浏览器
Oct 22 Javascript
动态的绑定事件addEventListener方法的使用
Jan 24 Javascript
JS显示下拉列表框内全部元素的方法
Mar 31 Javascript
JavaScript实现在页面间传值的方法
Apr 07 Javascript
javascript元素动态创建实现方法
May 13 Javascript
Vue如何从1.0迁移到2.0
Oct 19 Javascript
Vue 拦截器对token过期处理方法
Jan 23 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
May 17 jQuery
layui点击数据表格添加或删除一行的例子
Sep 12 Javascript
Node对CommonJS的模块规范
Nov 06 Javascript
解决vue-router 嵌套路由没反应的问题
Sep 22 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也能干大事 随机函数
2015/04/14 PHP
php中Snoopy类用法实例
2015/06/19 PHP
PHP实现二维数组(或多维数组)转换成一维数组的常见方法总结
2019/12/04 PHP
js 处理URL实用技巧
2010/11/23 Javascript
映彩衣的js随笔(js图片切换效果)
2011/07/31 Javascript
JS中处理与当前时间间隔的函数代码
2012/05/23 Javascript
JS实现统计复选框选中个数并提示确定与取消的方法
2015/07/01 Javascript
ExtJs动态生成treepanel的Json格式
2015/07/19 Javascript
简单对比分析JavaScript中的apply,call与this的使用
2015/12/04 Javascript
理解JS绑定事件
2016/01/19 Javascript
详解JavaScript对象类型
2016/06/16 Javascript
VUE JS 使用组件实现双向绑定的示例代码
2017/01/10 Javascript
js生成随机数方法和实例
2017/01/17 Javascript
详解webpack进阶之loader篇
2017/08/23 Javascript
vue实现图书管理demo详解
2017/10/17 Javascript
使用DataTable插件实现异步加载数据
2017/11/19 Javascript
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
vue webpack开发访问后台接口全局配置的方法
2018/09/18 Javascript
javascript设计模式 ? 单例模式原理与应用实例分析
2020/04/09 Javascript
python threading模块操作多线程介绍
2015/04/08 Python
横向对比分析Python解析XML的四种方式
2016/03/30 Python
Python实现按特定格式对文件进行读写的方法示例
2017/11/30 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
python openvc 裁剪、剪切图片 提取图片的行和列
2019/09/19 Python
关于tf.reverse_sequence()简述
2020/01/20 Python
python闭包与引用以及需要注意的陷阱
2020/09/18 Python
css3 clip实现圆环进度条的示例代码
2018/02/07 HTML / CSS
耐克美国官网:Nike.com
2016/08/01 全球购物
特罗佩亚包官方网站:Tropea
2017/01/03 全球购物
马来西亚领先的在线礼品店:Giftr
2018/08/23 全球购物
某/etc/fstab文件中的某行如下: /dev/had5 /mnt/dosdata msdos defaults,usrquota 1 2 请解释其含义
2013/09/18 面试题
车间安全生产标语
2014/06/06 职场文书
高等教育学专业自荐书
2014/06/17 职场文书
节能环保演讲稿
2014/08/28 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
2014年度思想工作总结
2014/11/27 职场文书