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下查找父节点的简单方法
Aug 13 Javascript
用js实现上传图片前的预览(TX的面试题)
Aug 14 Javascript
基于JQuery的一句代码实现表格的简单筛选
Jul 26 Javascript
基于json的jquery地区联动效果代码
Jul 06 Javascript
JS关键字球状旋转效果的实例代码
Nov 29 Javascript
JavaScript实现页面5秒后自动跳转的方法
Apr 16 Javascript
jQuery插件imgPreviewQs实现上传图片预览
Jan 15 Javascript
在Vue中如何使用Cookie操作实例
Jul 27 Javascript
react高阶组件经典应用之权限控制详解
Sep 07 Javascript
angular学习之动态创建表单的方法
Dec 07 Javascript
layer 关闭指定弹出层的例子
Sep 25 Javascript
Vue Mint UI mt-swipe的使用方式
Jun 05 Vue.js
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中实现接收多个name相同但Value不相同表单数据实例
2015/02/03 PHP
php接口数据加密、解密、验证签名
2015/03/12 PHP
PHP查找数值数组中不重复最大和最小的10个数的方法
2015/04/20 PHP
PhpStorm 2020.3:新增开箱即用的PHP 8属性(推荐)
2020/10/30 PHP
Prototype使用指南之enumerable.js
2007/01/10 Javascript
表单项的name命名为submit、reset引起的问题
2007/12/22 Javascript
javascript removeChild 使用注意事项
2009/04/11 Javascript
jquery实现textarea输入字符控制(仿微博输入控制字符)
2013/04/26 Javascript
JavaScript弹出新窗口并控制窗口移动到指定位置的方法
2015/04/06 Javascript
jQuery获取上传文件的名称的正则表达式
2015/05/21 Javascript
JS实现的表格行鼠标点击高亮效果代码
2015/11/27 Javascript
jQuery siblings()用法实例详解
2016/04/26 Javascript
原生js获取iframe中dom元素--父子页面相互获取对方dom元素的方法
2016/08/05 Javascript
可输入文字查找ajax下拉框控件 ComBox的实现方法
2016/10/25 Javascript
jQuery实现动态给table赋值的方法示例
2017/07/04 jQuery
JQuery属性操作与循环用法示例
2019/05/15 jQuery
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
2019/10/14 Javascript
Vue CLI4 Vue.config.js标准配置(最全注释)
2020/06/05 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
2020/11/17 Vue.js
简单讲解Python中的字符串与字符串的输入输出
2016/03/13 Python
浅谈Python使用Bottle来提供一个简单的web服务
2017/12/27 Python
Python爬虫天气预报实例详解(小白入门)
2018/01/24 Python
儿童编程python入门
2018/05/08 Python
面向初学者的Python编辑器Mu
2018/10/08 Python
利用python修改json文件的value方法
2018/12/31 Python
Python中那些 Pythonic的写法详解
2019/07/02 Python
Django 权限认证(根据不同的用户,设置不同的显示和访问权限)
2019/07/24 Python
解决安装python3.7.4报错Can''t connect to HTTPS URL because the SSL module is not available
2019/07/31 Python
浅谈matplotlib.pyplot与axes的关系
2020/03/06 Python
浅谈python多线程和多线程变量共享问题介绍
2020/04/17 Python
Python Selenium模块安装使用教程详解
2020/07/09 Python
美国派对用品及装饰品网上商店:Shindigz
2016/07/30 全球购物
奥地利度假券的专家:we-are.travel
2019/04/10 全球购物
民事诉讼授权委托书范文
2014/08/02 职场文书
亮剑观后感600字
2015/06/05 职场文书
mysql中整数数据类型tinyint详解
2021/12/06 MySQL