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 相关文章推荐
javascript来定义类的规范小结
Nov 19 Javascript
jq实现酷炫的鼠标经过图片翻滚效果
Mar 12 Javascript
jqueryUI里拖拽排序示例分析
Feb 26 Javascript
JavaScript实现选择框按比例拖拉缩放的方法
Aug 04 Javascript
jquery点击缩略图切换视频播放特效代码分享
Sep 15 Javascript
详解Wondows下Node.js使用MongoDB的环境配置
Mar 01 Javascript
在JavaScript中模拟类(class)及类的继承关系
May 20 Javascript
jquery 中toggle的2种用法详解(推荐)
Sep 02 Javascript
Vue2 Vue-cli中使用Typescript的配置详解
Jul 24 Javascript
vue中使用ueditor富文本编辑器
Feb 08 Javascript
vue路由结构可设一层方便动态添加路由操作
Aug 31 Javascript
在HTML中使用JavaScript的两种方法
Dec 24 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 已经成熟
2006/12/04 PHP
php is_file()和is_dir()用于遍历目录时用法注意事项
2010/03/02 PHP
PHP获取数组中某元素的位置及array_keys函数应用
2013/01/29 PHP
php使用pdo连接mssql server数据库实例
2014/12/25 PHP
php中执行系统命令的方法
2015/03/21 PHP
javascript Zifa FormValid 0.1表单验证 代码打包下载
2007/06/08 Javascript
一个符号插入器 中用到的js代码
2007/09/04 Javascript
jQuery EasyUI 开源插件套装 完全替代ExtJS
2010/03/24 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
Js setInterval与setTimeout(定时执行与循环执行)的代码(可以传入参数)
2010/06/11 Javascript
jquery实现邮箱自动补全功能示例分享
2014/02/17 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
jQuery源码解读之removeClass()方法分析
2015/02/20 Javascript
jquery 实现回车登录详解及实例代码
2016/10/23 Javascript
JS实现二叉查找树的建立以及一些遍历方法实现
2017/04/17 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
基于vue 动态加载图片src的解决方法
2018/02/05 Javascript
VueCli3构建TS项目的方法步骤
2018/11/07 Javascript
jquery实现点击弹出对话框
2020/02/08 jQuery
react国际化化插件react-i18n-auto使用详解
2020/03/31 Javascript
JavaScript 俄罗斯方块游戏实现方法与代码解释
2020/04/08 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
2020/08/10 Javascript
[42:24]完美世界DOTA2联赛循环赛 LBZS vs DM BO2第一场 11.01
2020/11/02 DOTA
查看Python安装路径以及安装包路径小技巧
2015/04/28 Python
pycharm配置安装autopep8自动规范代码的实现
2021/03/02 Python
纯CSS3实现运行时钟的示例代码
2021/01/25 HTML / CSS
HTML5 canvas基本绘图之绘制五角星
2016/06/27 HTML / CSS
Debenhams百货英国官方网站:Debenhams UK
2016/07/12 全球购物
荷兰本土平价百货:HEMA
2017/10/23 全球购物
美国专业汽车音响和移动电子产品零售商:Car Toys
2019/05/13 全球购物
LG西班牙网上商店:Tienda LG Online Es
2019/07/30 全球购物
小学科学教学反思
2014/01/26 职场文书
2019新员工试用期转正工作总结范文
2019/08/21 职场文书
利用javaScript处理常用事件详解
2021/04/14 Javascript
python3实现Dijkstra算法最短路径的实现
2021/05/12 Python
MySQL 外键约束和表关系相关总结
2021/06/20 MySQL