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 ajax的success回调函数中实现按钮置灰倒计时
Nov 19 Javascript
JS 操作Array数组的方法及属性实例解析
Jan 08 Javascript
js 金额格式化来回转换示例
Feb 23 Javascript
Node.js 的异步 IO 性能探讨
Oct 08 Javascript
JavaScript必知必会(二) null 和undefined
Jun 08 Javascript
轻松实现js弹框显示选项
Sep 13 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
Jun 12 Javascript
解决VUEX兼容IE上的报错问题
Mar 01 Javascript
JavaScript实现简单音乐播放器
Apr 17 Javascript
vue项目打包后上传至GitHub并实现github-pages的预览
May 06 Javascript
小程序根据手机机型设置自定义底部导航距离
Jun 04 Javascript
关于javascript中的promise的用法和注意事项(推荐)
Jan 15 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 session 预定义数组
2009/03/16 PHP
php自定义中文字符串截取函数substr_for_gb2312及substr_for_utf8示例
2016/05/28 PHP
使用laravel和ajax实现整个页面无刷新的操作方法
2019/10/03 PHP
PHP中的异常处理机制深入讲解
2020/11/10 PHP
用Jquery实现可编辑表格并用AJAX提交到服务器修改数据
2009/12/27 Javascript
在Javascript里访问SharePoint列表数据的实现方法
2011/05/22 Javascript
jquery处理json对象
2014/11/03 Javascript
js获得当前系统日期时间的方法
2015/05/06 Javascript
coffeescript使用的方式汇总
2015/08/05 Javascript
浅析javascript中的事件代理
2015/11/06 Javascript
整理Javascript函数学习笔记
2015/12/01 Javascript
JS中BOM相关知识点总结(必看篇)
2016/11/22 Javascript
bootstrap模态框垂直居中效果
2016/12/03 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
vue-router:嵌套路由的使用方法
2017/02/21 Javascript
JS实现css hover操作的方法示例
2017/04/07 Javascript
Angular.js实现获取验证码倒计时60秒按钮的简单方法
2017/10/18 Javascript
Vue v2.5 调整和更新不完全问题
2017/10/24 Javascript
vue轮播图插件vue-awesome-swiper
2017/11/27 Javascript
vue 实现 ios 原生picker 效果及实现思路解析
2017/12/06 Javascript
利用weixin-java-miniapp生成小程序码并直接返回图片文件流的方法
2019/03/29 Javascript
JS实现指定区域的全屏显示功能示例
2019/04/25 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
基于Vue el-autocomplete 实现类似百度搜索框功能
2019/10/25 Javascript
关于vue.js中实现方法内某些代码延时执行
2019/11/14 Javascript
[02:32]DOTA2英雄基础教程 美杜莎
2014/01/07 DOTA
零基础写python爬虫之使用urllib2组件抓取网页内容
2014/11/04 Python
python使用PythonMagick将jpg图片转换成ico图片的方法
2015/03/26 Python
numpy实现合并多维矩阵、list的扩展方法
2018/05/08 Python
开启Django博客的RSS功能的实现方法
2020/02/17 Python
Python中的整除和取模实例
2020/06/03 Python
Kipling意大利官网:世界著名的时尚休闲包袋品牌
2019/06/05 全球购物
校友会欢迎辞
2014/01/13 职场文书
高中生旷课检讨书
2014/10/08 职场文书
学生检讨书怎么写
2014/10/09 职场文书
摘录式读书笔记
2015/07/01 职场文书