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 相关文章推荐
js计数器代码
Nov 04 Javascript
JavaScript 三种不同位置代码的写法
Oct 25 Javascript
js 针对html DOM元素操作等经验累积
Mar 11 Javascript
js实现编辑div节点名称的方法
Dec 17 Javascript
JS控制表格实现一条光线流动分割行的方法
Mar 09 Javascript
jQuery监控文本框事件并作相应处理的方法
Apr 16 Javascript
JQuery动态添加Select的Option元素实现方法
Aug 29 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
Dec 28 Javascript
Javascript实现信息滚动效果
May 18 Javascript
vue 基于element-ui 分页组件封装的实例代码
Dec 10 Javascript
详解JavaScript 作用域
Jul 14 Javascript
基于vue实现简易打地鼠游戏
Aug 21 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
codeigniter自带数据库类使用方法说明
2014/03/25 PHP
php版微信小店API二次开发及使用示例
2016/11/12 PHP
利用PHP判断文件是否为图片的方法总结
2017/01/06 PHP
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
XML的代替者----JSON
2007/07/21 Javascript
jquery mobile事件多次绑定示例代码
2013/09/13 Javascript
深入理解javascript作用域和闭包
2014/09/23 Javascript
深入浅出理解javaScript原型链
2015/05/09 Javascript
Node.js的环境安装配置(使用nvm方式)
2016/10/11 Javascript
JavaScript奇技淫巧44招【实用】
2016/12/11 Javascript
BootStrapTable 单选及取值的实现方法
2017/01/10 Javascript
vue模板语法-插值详解
2017/03/06 Javascript
js图片放大镜效果实现方法详解
2020/10/28 Javascript
PHP7新特性简述
2017/06/11 Javascript
Vue.js项目部署到服务器的详细步骤
2017/07/17 Javascript
利用纯js + transition动画实现移动端web轮播图详解
2017/09/10 Javascript
ES6中Array.copyWithin()函数的用法实例详解
2017/09/16 Javascript
基于jQuery选择器之表单对象属性筛选选择器的实例
2017/09/19 jQuery
简述JS控制台的使用
2018/07/15 Javascript
微信小程序使用scroll-view标签实现自动滑动到底部功能的实例代码
2018/11/09 Javascript
[03:58]兄弟们,回来开黑了!DOTA2昔日战友招募宣传视频
2016/07/17 DOTA
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
[50:50]完美世界DOTA2联赛PWL S3 INK ICE vs DLG 第一场 12.20
2020/12/23 DOTA
初学Python函数的笔记整理
2015/04/07 Python
python文本数据处理学习笔记详解
2019/06/17 Python
Python字符串和正则表达式中的反斜杠('\')问题详解
2019/09/03 Python
Pandas 缺失数据处理的实现
2019/11/04 Python
python 6种方法实现单例模式
2020/12/15 Python
Python3.9.1中使用split()的处理方法(推荐)
2021/02/07 Python
马来西亚最热门的在线时尚商店:FashionValet
2018/11/11 全球购物
Cynthia Rowley官网:全球领先的生活方式品牌
2020/10/27 全球购物
机修工岗位职责
2013/11/24 职场文书
工伤事故处理协议书怎么写
2014/10/15 职场文书
2014年房产经纪人工作总结
2014/12/08 职场文书
大学生社会实践活动总结报告
2015/05/06 职场文书
张丽莉事迹观后感
2015/06/16 职场文书