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 相关文章推荐
Google Suggest ;-) 基于js的动态下拉菜单
Oct 11 Javascript
JS 模态对话框和非模态对话框操作技巧汇总
Apr 15 Javascript
了解Javascript的模块化开发
Mar 02 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
jquery获取所有选中的checkbox实现代码
May 26 Javascript
Angularjs 制作购物车功能实例代码
Sep 14 Javascript
vue.js初学入门教程(1)
Nov 03 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
angularjs中判断ng-repeat是否迭代完的实例
Sep 12 Javascript
JavaScript的级联函数用法简单示例【链式调用】
Mar 26 Javascript
node.js使用zlib模块进行数据压缩和解压操作示例
Feb 12 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 mysql_query执行超时(Fatal error: Maximum execution time …)
2013/07/03 PHP
详解PHP中的PDO类
2015/07/06 PHP
十个PHP高级应用技巧果断收藏
2015/09/25 PHP
PHP设计模式之迭代器模式
2016/06/17 PHP
PHP中递归的实现实例详解
2017/11/14 PHP
PHP生成zip压缩包的常用方法示例
2019/08/22 PHP
解决laravel 出现ajax请求419(unknown status)的问题
2019/09/03 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
JavaScript 学习历程和心得分享
2010/12/12 Javascript
用方法封装javascript的new操作符(一)
2010/12/25 Javascript
JavaScript中的稀疏数组与密集数组[译]
2012/09/17 Javascript
JS验证邮箱格式是否正确的代码
2013/12/05 Javascript
JS+CSS实现仿新浪微博搜索框的方法
2015/02/24 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
javascript实现unicode与ASCII相互转换的方法
2015/12/10 Javascript
原生JS实现首页进度加载动画
2016/09/14 Javascript
jQuery实现鼠标滑过预览图片大图效果的方法
2017/04/26 jQuery
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
Vue2 添加数据可视化支持的方法步骤
2019/01/02 Javascript
微信小程序加载机制及运行机制图解
2019/11/27 Javascript
v-slot和slot、slot-scope之间相互替换实例
2020/09/04 Javascript
详解python中 os._exit() 和 sys.exit(), exit(0)和exit(1) 的用法和区别
2017/06/23 Python
python 中不同包 类 方法 之间的调用详解
2020/03/09 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
自荐信结尾
2013/10/27 职场文书
高级方案规划工程师岗位职责
2013/11/29 职场文书
材料采购员岗位职责
2013/12/17 职场文书
公司成立感言
2014/01/11 职场文书
个人委托书怎么写
2014/04/04 职场文书
个人合作协议书范本
2014/04/18 职场文书
计算机求职自荐信范文
2014/04/19 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
奖学金感谢信
2015/01/21 职场文书
2015年大学社团工作总结
2015/04/09 职场文书
2015年服务员个人工作总结
2015/05/27 职场文书
Python matplotlib 利用随机函数生成变化图形
2022/04/26 Python