js弹出窗口之弹出层的小例子


Posted in Javascript onJune 17, 2013

[html]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">  
<HTML xmlns="http://www.w3.org/1999/xhtml">  
<HEAD>  
<TITLE>弹出窗口</TITLE>  
<META http-equiv=Content-Type content="text/html; charset=utf-8">  
<style>  
#popupcontent{   
  position: absolute;  
  visibility: hidden;     
  overflow: hidden;     
  border:1px solid #CCC;     
  background-color:#F9F9F9;     
  border:1px solid #333;     
  padding:5px;}  
</style>  
<script>  
var baseText = null;   
function showPopup(w,h){     
    var popUp = document.getElementById("popupcontent");     
    popUp.style.top = "200px";     
    popUp.style.left = "200px";     
    popUp.style.width = w + "px";     
    popUp.style.height = h + "px";      
    if (baseText == null) baseText = popUp.innerHTML;    
    popUp.innerHTML = baseText + "<div id=\"statusbar\"><input type=\"button\" value=\"Close window\" onClick=\"hidePopup();\"></div>";     
    var sbar = document.getElementById("statusbar");     
    sbar.style.marginTop = (parseInt(h)-60) + "px";    
    popUp.style.visibility = "visible";  
}  
function hidePopup(){     
    var popUp = document.getElementById("popupcontent");     
    popUp.style.visibility = "hidden";  
}  
</script>  
<META content="MSHTML 6.00.2900.2838" name=GENERATOR></HEAD>  
<BODY>  
<div id="popupcontent">content</div>    
<p><a href="#" onClick="showPopup(300,200);" >onclick</a></p>  
</BODY>  
</HTML> 
Javascript 相关文章推荐
jQuery对表单的操作代码集合
Apr 06 Javascript
jQuery中常用的遍历函数用法实例总结
Sep 01 Javascript
jQuery实现鼠标经过时高亮,同时其他同级元素变暗的效果
Sep 18 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
AngularJS前端页面操作之用户修改密码功能示例
Mar 27 Javascript
判断颜色是否合法的正则表达式(详解)
May 03 Javascript
vue.js路由跳转详解
Aug 28 Javascript
vue2.0实现音乐/视频播放进度条组件
Jun 06 Javascript
微信小程序bindtap事件与冒泡阻止详解
Aug 08 Javascript
js实现窗口全屏示例详解
Sep 17 Javascript
CentOS 8.2服务器上安装最新版Node.js的方法
Dec 16 Javascript
原生js实现自定义滚动条
Jan 20 Javascript
js弹出层包含flash 不能关闭隐藏的2种处理方法
Jun 17 #Javascript
JS简单的轮播的图片滚动实例
Jun 17 #Javascript
js模仿windows桌面图标排列算法具体实现(附图)
Jun 16 #Javascript
js模仿jquery的写法示例代码
Jun 16 #Javascript
$.getJSON在IE下失效的原因分析及解决方法
Jun 16 #Javascript
jsp js鼠标移动到指定区域显示选项卡离开时隐藏示例
Jun 14 #Javascript
JS保存、读取、换行、转Json报错处理方法
Jun 14 #Javascript
You might like
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
Laravel框架实现的使用smtp发送邮件功能示例
2019/03/12 PHP
基于Jquery的动态创建DOM元素的代码
2010/12/28 Javascript
js 字符串转化成数字的代码
2011/06/29 Javascript
鼠标放在图片上显示大图的JS代码
2013/03/26 Javascript
超级简单的jquery操作表格方法
2014/12/15 Javascript
js中class的点击事件没有效果的解决方法
2016/10/13 Javascript
简单实现nodejs上传功能
2017/01/14 NodeJs
BootStrap+Mybatis框架下实现表单提交数据重复验证
2017/03/23 Javascript
JavaScript运动框架 解决速度正负取整问题(一)
2017/05/17 Javascript
JavaScript实现图片合成下载的示例
2020/11/19 Javascript
[01:05:36]VP vs TNC Supermajor小组赛B组 BO3 第二场 6.2
2018/06/03 DOTA
[00:10]DOTA2全国高校联赛速递
2018/05/30 DOTA
Python中的super用法详解
2015/05/28 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
python基础练习之几个简单的游戏
2017/11/10 Python
python机器学习之神经网络(二)
2017/12/20 Python
Python实现字典按照value进行排序的方法分析
2017/12/23 Python
pandas groupby 分组取每组的前几行记录方法
2018/04/20 Python
详解Python3.6的py文件打包生成exe
2018/07/13 Python
python实现数据分析与建模
2019/07/11 Python
tensorflow 自定义损失函数示例代码
2020/02/05 Python
python GUI编程(Tkinter) 创建子窗口及在窗口上用图片绘图实例
2020/03/04 Python
使用Python文件读写,自定义分隔符(custom delimiter)
2020/07/05 Python
CSS3的常见transformation图形变化用法小结
2016/05/13 HTML / CSS
DC Shoes官网:美国滑板鞋和服饰品牌
2017/09/03 全球购物
在线吉他课程,学习如何弹吉他:Fender Play
2019/02/28 全球购物
物业管理个人自我评价
2013/11/08 职场文书
财务经理的岗位职责
2013/12/17 职场文书
餐饮加盟计划书
2014/01/10 职场文书
高三学生评语大全
2014/04/25 职场文书
卫生标语大全
2014/06/21 职场文书
乱世佳人观后感
2015/06/08 职场文书
银行资信证明
2015/06/17 职场文书
初中数学教学反思范文
2016/02/17 职场文书
golang 接口嵌套实现复用的操作
2021/04/29 Golang