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自动显示最后更新时间
Mar 15 Javascript
JavaScript加密解密7种方法总结分析
Oct 07 Javascript
javascript Keycode对照表
Oct 24 Javascript
基于jQuery实现最基本的淡入淡出效果实例
Feb 02 Javascript
javascript实现3D变换的立体圆圈实例
Aug 06 Javascript
javascript实现图片上传前台页面
Aug 18 Javascript
概述BootStrap中role=&quot;form&quot;及role作用角色
Dec 08 Javascript
JS实现课堂随机点名和顺序点名
Mar 09 Javascript
JS脚本实现网页自动秒杀点击
Jan 11 Javascript
vue input输入框模糊查询的示例代码
May 22 Javascript
在vue项目中使用sass语法问题
Jul 18 Javascript
js实现tab栏切换效果
Aug 02 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实现根据设备类型自动跳转相应页面的方法
2014/07/24 PHP
PHP查看当前变量类型的方法
2015/07/31 PHP
PHP实现二维数组根据key进行排序的方法
2016/12/30 PHP
深入解析Laravel5.5中的包自动发现Package Auto Discovery
2017/09/13 PHP
Nigma vs Alliance BO5 第五场2.14
2021/03/10 DOTA
javascript js cookie的存储,获取和删除
2007/12/29 Javascript
javascript 表格排序和表头浮动效果(扩展SortTable)
2009/04/07 Javascript
JQuery 前台切换网站的样式实现
2009/06/22 Javascript
情人节专属 纯js脚本1k大小的3D玫瑰效果
2012/02/11 Javascript
JavaScript自定义DateDiff函数(兼容所有浏览器)
2012/03/01 Javascript
js 获取、清空input type=&quot;file&quot;的值示例代码
2014/02/19 Javascript
jquery动态调整div大小使其宽度始终为浏览器宽度
2014/06/06 Javascript
浅谈JS日期(Date)处理函数
2014/12/07 Javascript
轻松5句话解决JavaScript的作用域
2016/07/15 Javascript
微信小程序 LOL 英雄介绍开发实例
2016/09/30 Javascript
Angularjs 创建可复用组件实例代码
2016/10/09 Javascript
JS实现匀加速与匀减速运动的方法示例
2017/09/04 Javascript
小程序获取当前位置加搜索附近热门小区及商区的方法
2019/04/08 Javascript
Vue移动端实现图片上传及超过1M压缩上传
2019/12/23 Javascript
Vue实现 点击显示再点击隐藏效果(点击页面空白区域也隐藏效果)
2020/01/16 Javascript
JavaScript缺少insertAfter解决方案
2020/07/03 Javascript
python实现在控制台输入密码不显示的方法
2015/07/02 Python
深入源码解析Python中的对象与类型
2015/12/11 Python
Python数据结构与算法之二叉树结构定义与遍历方法详解
2017/12/12 Python
Python列表list排列组合操作示例
2018/12/18 Python
python仿evething的文件搜索器实例代码
2019/05/13 Python
python 求某条线上特定x值或y值的点坐标方法
2019/07/09 Python
Python之关于类变量的两种赋值区别详解
2020/03/12 Python
Python爬虫定时计划任务的几种常见方法(推荐)
2021/01/15 Python
意大利折扣和优惠券网站:Groupalia
2019/10/09 全球购物
给定一个时间点,希望得到其他时间点
2013/11/07 面试题
市三好学生主要事迹
2014/01/28 职场文书
国土资源局开展党的群众路线教育实践活动整改措施
2014/09/26 职场文书
天坛导游词
2015/02/02 职场文书
工厂仓管员岗位职责
2015/04/01 职场文书
JS实现简单九宫格抽奖
2022/06/28 Javascript