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 相关文章推荐
基于prototype扩展的JavaScript常用函数库
Nov 30 Javascript
jquery移动listbox的值原理及代码
May 03 Javascript
javascript级联下拉列表实例代码(自写)
May 10 Javascript
jQuery选择器querySelector的使用指南
Jan 23 Javascript
jquery实现图片随机排列的方法
May 04 Javascript
javascript实现table表格隔行变色的方法
May 13 Javascript
ECMAScript6中Map/WeakMap详解
Jun 12 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
KnockoutJS 3.X API 第四章之表单textInput、hasFocus、checked绑定
Oct 11 Javascript
Vue.js@2.6.10更新内置错误处机制Fundebug同步支持相应错误监控
May 13 Javascript
layUI实现三级导航菜单效果
Jul 26 Javascript
JS工厂模式开发实践案例分析
Oct 17 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
ThinkPHP中实例Model方法的区别说明
2010/08/21 PHP
一个PHP二维数组排序的函数分享
2014/01/17 PHP
php实现网站留言板功能
2015/11/04 PHP
PHP实现的链式队列结构示例
2017/09/15 PHP
Laravel下生成验证码的类
2017/11/15 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
动态加载iframe
2006/06/16 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
js查找节点的方法小结
2015/01/13 Javascript
js分页工具实例
2015/01/28 Javascript
js同源策略详解
2015/05/21 Javascript
JavaScript获取浏览器信息的方法
2015/11/20 Javascript
微信小程序 Windows2008 R2服务器配置TLS1.2方法
2016/12/05 Javascript
js实现兼容PC端和移动端滑块拖动选择数字效果
2017/02/16 Javascript
Angularjs 双向绑定时字符串的转换成数字类型的问题
2017/06/12 Javascript
浅谈Vue.js中的v-on(事件处理)
2017/09/05 Javascript
Angular 4根据组件名称动态创建出组件的方法教程
2017/11/01 Javascript
js设置随机切换背景图片的简单实例
2017/11/12 Javascript
简述vue状态管理模式之vuex
2018/08/29 Javascript
js中对象和面向对象与Json介绍
2019/01/21 Javascript
深入了解Hybrid App技术的相关知识
2019/07/17 Javascript
layui实现鼠标移动到单元格上显示数据的方法
2019/09/11 Javascript
基于vue-cli3和element实现登陆页面
2019/11/13 Javascript
精读《Vue3.0 Function API》
2020/05/20 Javascript
[01:21]DOTA2周边文化主题展 神秘商店火热开售
2017/07/30 DOTA
Python中字典(dict)和列表(list)的排序方法实例
2014/06/16 Python
Linux下为不同版本python安装第三方库
2016/08/31 Python
python代码 if not x: 和 if x is not None: 和 if not x is None:使用介绍
2016/09/21 Python
python使用matplotlib绘制折线图教程
2017/02/08 Python
使用Python实现正态分布、正态分布采样
2019/11/20 Python
全球性的在线购物网站:Zapals
2017/03/22 全球购物
wedgwood加拿大官网:1759年成立的英国国宝级陶瓷餐具品牌
2018/07/17 全球购物
小学中秋节活动方案
2014/02/06 职场文书
创建青年文明号材料
2014/05/09 职场文书
HTML+JS实现在线朗读器
2022/02/15 Javascript
python通过新建环境安装tfx的问题
2022/05/20 Python