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 事件查询综合 推荐收藏
Mar 10 Javascript
使用js如何实现全选与全不选
Dec 30 Javascript
js中直接声明一个对象的方法
Aug 10 Javascript
推荐一个封装好的getElementsByClassName方法
Dec 02 Javascript
jQuery性能优化技巧分析
Feb 20 Javascript
javascript匀速运动实现方法分析
Jan 08 Javascript
AngularJS入门教程之模块化操作用法示例
Nov 02 Javascript
javascript实现简单的可随机变色网页计算器示例
Dec 30 Javascript
详解axios在node.js中的post使用
Apr 27 Javascript
vue2 router 动态传参,多个参数的实例
Nov 10 Javascript
JavaScript设计模式之工厂模式简单实例教程
Jul 03 Javascript
vue-drag-chart 拖动/缩放图表组件的实例代码
Apr 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
给海燕B411配件机起死回生配上件
2021/03/02 无线电
PHP 中文乱码解决办法总结分析
2009/07/30 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
Django 中 cookie的使用
2017/08/17 PHP
完美的php分页类
2017/10/24 PHP
PHP学习记录之数组函数
2018/06/01 PHP
PHP实现数组转JSon和JSon转数组的方法示例
2018/06/14 PHP
js实现双向链表互联网机顶盒实战应用实现
2011/10/28 Javascript
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
js判断输入是否为数字的具体实例
2013/08/03 Javascript
Lab.js初次使用笔记
2015/02/28 Javascript
js获取form的方法
2015/05/06 Javascript
JavaScript实现设计模式中的单例模式的一些技巧总结
2016/05/17 Javascript
9个让JavaScript调试更简单的Console命令
2016/11/14 Javascript
Bootstrap Table使用心得总结
2016/11/29 Javascript
JavaScript中日常收集常见的10种错误(推荐)
2017/01/08 Javascript
移动端刮刮乐的实现方式(js+HTML5)
2017/03/23 Javascript
浅谈js中的this问题
2017/08/31 Javascript
浅谈webpack+react多页面开发终极架构
2018/11/11 Javascript
vue 地图可视化 maptalks 篇实例代码详解
2019/05/21 Javascript
修改NPM全局模式的默认安装路径的方法
2020/12/15 Javascript
Python实现的彩票机选器实例
2015/06/17 Python
用python写个自动SSH登录远程服务器的小工具(实例)
2017/06/17 Python
vscode 远程调试python的方法
2017/12/01 Python
通过python实现windows桌面截图代码实例
2020/01/17 Python
python GUI库图形界面开发之PyQt5布局控件QGridLayout详细使用方法与实例
2020/03/06 Python
pycharm-professional-2020.1下载与激活的教程
2020/09/21 Python
python实现发送带附件的邮件代码分享
2020/09/22 Python
Python中Selenium模块的使用详解
2020/10/09 Python
实例讲解CSS3中Transform的perspective属性的用法
2016/04/22 HTML / CSS
临床医学应届生求职信
2013/11/06 职场文书
统计专业自荐书
2014/07/06 职场文书
领导班子遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
2014年团委工作总结
2014/11/13 职场文书
教师个人发展总结
2015/02/11 职场文书
AI:如何训练机器学习的模型
2021/04/16 Python