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 相关文章推荐
Mootools 1.2教程 事件处理
Sep 15 Javascript
jquery SweetAlert插件实现响应式提示框
Aug 18 Javascript
温习Javascript基础语法之词法结构
May 31 Javascript
用JS实现轮播图效果(二)
Jun 26 Javascript
javascript的函数劫持浅析
Sep 26 Javascript
微信小程序 富文本转文本实例详解
Oct 24 Javascript
AngularJS解决ng界面长表达式(ui-set)的方法分析
Nov 07 Javascript
基于Phantomjs生成PDF的实现方法
Nov 07 Javascript
Bootstarp在pycharm中的安装及简单的使用方法
Apr 19 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
微信小程序button标签open-type属性原理解析
Jan 21 Javascript
JavaScript实现PC端横向轮播图
Feb 07 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的String类代码
2010/04/20 PHP
php中使用ExcelFileParser处理excel获得数据(可作批量导入到数据库使用)
2010/08/21 PHP
PHP+MySQL实现无极限分类栏目的方法
2015/12/23 PHP
PHP 实现从数据库导出到.csv文件方法
2017/07/06 PHP
js change,propertychange,input事件小议
2011/12/20 Javascript
导入extjs、jquery 文件时$使用冲突问题解决方法
2014/01/14 Javascript
初步使用Node连接Mysql数据库
2016/03/03 Javascript
整理关于Bootstrap模态弹出框的慕课笔记
2017/03/29 Javascript
JavaScript实现无限级递归树的示例代码
2019/03/29 Javascript
微信小程序实现批量倒计时功能
2020/11/01 Javascript
浏览器JavaScript调试功能无法使用解决方案
2020/09/18 Javascript
[01:45]典藏宝瓶2+祈求者身心——这就是DOTA2TI9总奖金突破3000万美元的秘密
2019/07/21 DOTA
python生成日历实例解析
2014/08/21 Python
Python中内建函数的简单用法说明
2016/05/05 Python
解决Linux系统中python matplotlib画图的中文显示问题
2017/06/15 Python
python中aioysql(异步操作MySQL)的方法
2019/04/11 Python
python 安装教程之Pycharm安装及配置字体主题,换行,自动更新
2020/03/13 Python
Python requests模块session代码实例
2020/04/14 Python
PyCharm上安装Package的实现(以pandas为例)
2020/09/18 Python
用html5的canvas和JavaScript创建一个绘图程序的简单实例
2016/07/06 HTML / CSS
英国景点门票网站:attractiontix
2019/08/27 全球购物
Miller Harris官网:英国小众香水品牌
2020/09/24 全球购物
我有一个char * 型指针正巧指向一些int 型变量, 我想跳过它们。 为什么如下的代码((int *)p)++; 不行?
2013/05/09 面试题
索引覆盖(Index Covering)查询含义
2012/02/18 面试题
小学生防溺水广播稿
2014/01/12 职场文书
党员大会主持词
2014/04/02 职场文书
数控技校生自我鉴定
2014/04/19 职场文书
捐献物资倡议书范文
2014/05/19 职场文书
组工干部对照检查材料
2014/08/25 职场文书
关于随地扔垃圾的检讨书
2014/09/30 职场文书
法定代表人授权委托书范本
2014/10/07 职场文书
整改落实自查报告
2014/11/05 职场文书
2015年绩效考核工作总结
2015/05/23 职场文书
Mysql MVCC机制原理详解
2021/04/20 MySQL
深入详解JS函数的柯里化
2021/06/09 Javascript
Python TypeError: ‘float‘ object is not subscriptable错误解决
2022/12/24 Python