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 相关文章推荐
删除select中所有option选项jquery代码
Aug 12 Javascript
javascript中typeof操作符和constucor属性检测
Feb 26 Javascript
js+css绘制颜色动态变化的圈中圈效果
Jan 27 Javascript
Ext JS框架中日期函数的用法及日期选择控件的实现
May 21 Javascript
js重写方法的简单实现
Jul 10 Javascript
浅谈js继承的实现及公有、私有、静态方法的书写
Oct 28 Javascript
jQueryMobile之窗体长内容的缺陷与解决方法实例分析
Sep 20 jQuery
利用three.js画一个3D立体的正方体示例代码
Nov 19 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
微信小程序BindTap快速连续点击目标页面跳转多次问题处理
Apr 08 Javascript
一些手写JavaScript常用的函数汇总
Apr 16 Javascript
JS使用cookie保存用户登录信息操作示例
May 30 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
php数组函数序列之prev() - 移动数组内部指针到上一个元素的位置,并返回该元素值
2011/10/31 PHP
PHP发送AT指令实例代码
2016/05/26 PHP
Laravel的throttle中间件失效问题解决方法
2016/10/09 PHP
搜索附近的人PHP实现代码
2018/02/11 PHP
广告代码静态化js通用函数
2007/05/09 Javascript
JavaScript获取flash对象与网上的有所不同
2014/04/21 Javascript
jquery.mobile 共同布局遇到的问题小结
2015/02/10 Javascript
JavaScript中的bold()方法使用详解
2015/06/08 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
node.js中使用Export和Import的方法
2017/09/18 Javascript
原生js的ajax和解决跨域的jsonp(实例讲解)
2017/10/16 Javascript
Vue项目服务器部署之子目录部署方法
2019/05/12 Javascript
了解javascript中let和var及const关键字的区别
2019/05/24 Javascript
vue移动端城市三级联动组件使用详解
2019/07/26 Javascript
vue中使用vue-print.js实现多页打印
2020/03/05 Javascript
在Python中用has_key()方法查找键是否存在的教程
2015/05/21 Python
Python 字典与字符串的互转实例
2017/01/13 Python
TensorFlow入门使用 tf.train.Saver()保存模型
2018/04/24 Python
python中实现字符串翻转的方法
2018/07/11 Python
在Python中预先初始化列表内容和长度的实现
2019/11/28 Python
python3安装OCR识别库tesserocr过程图解
2020/04/02 Python
PyTorch 导数应用的使用教程
2020/08/31 Python
管理学专业个人求职信范文
2013/09/21 职场文书
关于梦想的演讲稿
2014/05/05 职场文书
护士求职信范文
2014/05/24 职场文书
淘宝店策划方案
2014/06/07 职场文书
舞蹈教育学专业求职信
2014/06/29 职场文书
旅游专业毕业生自荐书
2014/06/30 职场文书
幼儿教师暑期培训方案
2014/08/27 职场文书
2015年学校心理健康教育工作总结
2015/05/11 职场文书
回复函范文
2015/07/14 职场文书
小学秋季运动会加油口号及加油稿
2019/08/19 职场文书
关于golang高并发的实现与注意事项说明
2021/05/08 Golang
python基础入门之字典和集合
2021/06/13 Python
Python实现制作销售数据可视化看板详解
2021/11/27 Python
微软官方消息,在 2023 年 4 月 11 日之后微软将不再为 Office 2013 和 Skype for Business 2015 提供安全更新
2022/04/21 数码科技