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操作userdata
Apr 27 Javascript
读JavaScript DOM编程艺术笔记
Nov 15 Javascript
js取滚动条的尺寸的函数代码
Nov 30 Javascript
基于pthread_create,readlink,getpid等函数的学习与总结
Jul 17 Javascript
jquery获得option的值和对option进行操作
Dec 13 Javascript
document.forms[].submit()使用介绍
Feb 19 Javascript
Javascript的动态增加类的实现方法
Oct 20 Javascript
原生js轮播(仿慕课网)
Feb 15 Javascript
详解http访问解析流程原理
Oct 18 Javascript
vue.js实现格式化时间并每秒更新显示功能示例
Jul 07 Javascript
jQuery插件实现弹性运动完整示例
Jul 07 jQuery
vue.js watch经常失效的场景与解决方案
Jan 07 Vue.js
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
PHP中用mysqli面向对象打开连接关闭mysql数据库的方法
2016/11/05 PHP
PHP的PDO事务与自动提交
2019/01/24 PHP
取得一定长度的内容,处理中文
2006/12/20 Javascript
客户端脚本中常常出现的一些问题和调试技巧
2007/01/09 Javascript
js控制的回到页面顶端goTop的代码实现
2013/03/20 Javascript
jQuery插件的写法分享
2013/06/12 Javascript
js、jquery图片动画、动态切换示例代码
2014/06/03 Javascript
JQuery调用绑定click事件的3种写法
2015/03/28 Javascript
JavaScript获取表格(table)当前行的值、删除行、增加行
2015/07/03 Javascript
关于jquery中动态增加select,事件无效的快速解决方法
2016/08/29 Javascript
阿里云ecs服务器中安装部署node.js的步骤
2016/10/08 Javascript
Node.js编写CLI的实例详解
2017/05/17 Javascript
vue中关闭eslint的方法分析
2018/08/04 Javascript
vue-for循环嵌套操作示例
2019/01/28 Javascript
node.js微信小程序配置消息推送的实现
2019/02/13 Javascript
Vue.js实现大转盘抽奖总结及实现思路
2019/10/09 Javascript
Django中模版的子目录与include标签的使用方法
2015/07/16 Python
Python+django实现简单的文件上传
2016/08/17 Python
python脚本实现验证码识别
2018/06/07 Python
Python DataFrame.groupby()聚合函数,分组级运算
2018/09/18 Python
python地震数据可视化详解
2019/06/18 Python
Pandas的read_csv函数参数分析详解
2019/07/02 Python
Django模板Templates使用方法详解
2019/07/19 Python
PyQt5实现简单的计算器
2020/05/30 Python
Python字典取键、值对的方法步骤
2020/09/30 Python
python 实现性别识别
2020/11/21 Python
用CSS3实现无限循环的无缝滚动的实例代码
2017/07/04 HTML / CSS
亚马逊印度站:Amazon.in
2017/10/15 全球购物
俄罗斯最大的香水和化妆品网上商店:Randewoo
2020/11/05 全球购物
办公室保洁员岗位职责
2013/12/02 职场文书
工作决心书
2014/03/11 职场文书
教导主任竞聘演讲稿
2014/05/16 职场文书
2015年幼儿园新年寄语
2014/12/08 职场文书
2015年教师节新闻稿
2015/07/17 职场文书
写给消防战士们的一封慰问信
2019/10/07 职场文书
mysql 联合索引生效的条件及索引失效的条件
2021/11/20 MySQL