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 相关文章推荐
js资料toString 方法
Mar 13 Javascript
prototype Element学习笔记(Element篇三)
Oct 26 Javascript
在线编辑器中换行与内容自动提取
Apr 24 Javascript
js判断所有表单项不为空则提交表单的实现方法
Sep 09 Javascript
Angularjs中使用layDate日期控件示例
Jan 11 Javascript
原生js实现可拖动的登录框效果
Jan 21 Javascript
Javascript同时声明一连串(多个)变量的方法
Jan 23 Javascript
Spring shiro + bootstrap + jquery.validate 实现登录、注册功能
Jun 02 jQuery
浅谈Koa服务限流方法实践
Oct 23 Javascript
微信小程序实现图片上传功能实例(前端+PHP后端)
Jan 10 Javascript
vue-router 实现导航守卫(路由卫士)的实例代码
Sep 02 Javascript
浅谈JavaScript闭包
Apr 09 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
海河写的 Discuz论坛帖子调用js的php代码
2007/08/23 PHP
探讨如何在php168_cms中提取验证码
2013/06/08 PHP
PHP curl实现抓取302跳转后页面的示例
2014/07/04 PHP
smarty实现多级分类的方法
2014/12/05 PHP
PHP使用preg_split和explode分割textarea存放内容的方法分析
2017/07/03 PHP
javascript入门·动态的时钟,显示完整的一些方法,新年倒计时
2007/10/01 Javascript
Javascript 获取LI里的内容
2008/12/17 Javascript
判断window.onload是否多次使用的方法
2014/09/21 Javascript
javascript实现鼠标拖动改变层大小的方法
2015/04/30 Javascript
JS实现弹性漂浮效果的广告代码
2015/09/02 Javascript
js中使用使用原型(prototype)定义方法的好处详解
2016/07/04 Javascript
angularjs实现文字上下无缝滚动特效代码
2016/09/04 Javascript
详解angularJs模块ui-router之状态嵌套和视图嵌套
2017/04/28 Javascript
Vue之Vue.set动态新增对象属性方法
2018/02/23 Javascript
vue v-for循环重复数据无法添加问题解决方法【加track-by='索引'】
2019/03/15 Javascript
Vue递归组件+Vuex开发树形组件Tree--递归组件的简单实现
2019/04/01 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
2019/04/18 Javascript
浅析JavaScript 函数防抖和节流
2020/07/13 Javascript
微信小程序实现时间戳格式转换
2020/07/20 Javascript
[40:05]DOTA2上海特级锦标赛A组小组赛#1 EHOME VS MVP.Phx第一局
2016/02/25 DOTA
[55:35]VGJ.S vs Mski Supermajor小组赛C组 BO3 第二场 6.3
2018/06/04 DOTA
Python读大数据txt
2016/03/28 Python
Python实现使用卷积提取图片轮廓功能示例
2018/05/12 Python
使用Template格式化Python字符串的方法
2019/01/22 Python
python实现批量文件重命名
2019/10/31 Python
Django 解决distinct无法去除重复数据的问题
2020/05/20 Python
Python如何重新加载模块
2020/07/29 Python
size?瑞典:英国伦敦的球鞋精品店
2018/03/01 全球购物
台湾家适得:Homeget
2019/02/11 全球购物
网络维护管理员的自我评价分享
2013/11/11 职场文书
幼儿园运动会入场词
2014/02/10 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
创业计划书之奶茶店开店方案范本!
2019/08/06 职场文书
创业计划书之宠物店
2019/09/19 职场文书
jquery插件实现图片悬浮
2021/04/16 jQuery
关于mysql中时间日期类型和字符串类型的选择
2021/11/27 MySQL