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 相关文章推荐
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
果断收藏9个Javascript代码高亮脚本
Jan 06 Javascript
jquery操作checkbox火狐下第二次无法勾选的解决方法
Oct 10 Javascript
vue.js通过自定义指令实现数据拉取更新的实现方法
Oct 18 Javascript
IE8兼容Jquery.validate.js的问题
Dec 01 Javascript
详解vue.js的事件处理器v-on:click
Jun 27 Javascript
解决Vue 浏览器后退无法触发beforeRouteLeave的问题
Dec 24 Javascript
Node.js EventEmmitter事件监听器用法实例分析
Jan 07 Javascript
小程序hover-class点击态效果实现
Feb 26 Javascript
JS使用new操作符创建对象的方法分析
May 30 Javascript
vue + typescript + video.js实现 流媒体播放 视频监控功能
Jul 07 Javascript
js实现3D粒子酷炫动态旋转特效
Sep 13 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
建立动态的WML站点(二)
2006/10/09 PHP
php+ajax做仿百度搜索下拉自动提示框(有实例)
2012/08/21 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
PHP生成条形图的方法
2014/12/10 PHP
PHP中in_array函数使用的问题与解决办法
2016/09/11 PHP
php使用gd2绘制基本图形示例(直线、圆、正方形)
2017/02/15 PHP
javascript function、指针及内置对象
2009/02/19 Javascript
JavaScript 类的定义和引用 JavaScript高级培训 自定义对象
2010/04/27 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
jQuery 插件仿百度搜索框智能提示(带Value值)
2013/01/22 Javascript
ie浏览器使用js导出网页到excel并打印
2014/03/11 Javascript
全面解析Bootstrap排版使用方法(文字样式)
2015/11/30 Javascript
Bootstrap三种表单布局的使用方法
2016/06/21 Javascript
jquery自动补齐功能插件flexselect用法示例
2016/08/06 Javascript
获取JavaScript异步函数的返回值
2016/12/21 Javascript
javascript解析ajax返回的xml和json格式数据实例详解
2017/01/05 Javascript
js实现弹窗暗层效果
2017/01/16 Javascript
Javascript中的神器——Promise
2017/02/08 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
jQuery中 DOM节点操作方法大全
2017/10/12 jQuery
微信小程序动态生成二维码的实现代码
2018/07/25 Javascript
用python读写excel的方法
2014/11/18 Python
Python2.x版本中cmp()方法的使用教程
2015/05/14 Python
Python实现的选择排序算法原理与用法实例分析
2017/11/22 Python
python实现图片筛选程序
2018/10/24 Python
tensorflow实现对张量数据的切片操作方式
2020/01/19 Python
全面总结使用CSS实现水平垂直居中效果的方法
2016/03/10 HTML / CSS
澳大利亚宠物食品和药物在线:Jumbo Pets
2018/03/24 全球购物
如何用Python输出一个Fibonacci数列
2016/08/28 面试题
英语专业毕业生自我鉴定
2013/11/09 职场文书
学校清明节活动总结
2014/07/04 职场文书
2014年小学数学工作总结
2014/12/12 职场文书
给病人的慰问信
2015/03/23 职场文书
简述python四种分词工具,盘点哪个更好用?
2021/04/13 Python
MySQL创建表操作命令分享
2022/03/25 MySQL
MongoDB支持的索引类型
2022/04/11 MongoDB