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判断录入的日期是否合法
Jan 08 Javascript
jQuery Tools tab使用介绍
Jul 14 Javascript
JQuery 常用方法和事件详细介绍
Apr 18 Javascript
js模拟点击以提交表单为例兼容主流浏览器
Nov 29 Javascript
让alert不出现弹窗的两种方法
May 18 Javascript
js判断浏览器类型为ie6时不执行
Jun 15 Javascript
微信小程序 教程之事件
Oct 18 Javascript
利用node.js爬取指定排名网站的JS引用库详解
Jul 25 Javascript
node-sass安装失败的原因与解决方法
Sep 04 Javascript
解决Vue axios post请求,后台获取不到数据的问题方法
Aug 11 Javascript
更强大的vue ssr实现预取数据的方式
Jul 19 Javascript
微信浏览器下拉黑边解决方案 wScroollFix
Jan 21 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数据库调用类调用实例(详细注释)
2012/07/12 PHP
web server使用php生成web页面的三种方法总结
2013/10/28 PHP
PHP同时连接多个mysql数据库示例代码
2014/03/17 PHP
PHP调用Mailgun发送邮件的方法
2017/05/04 PHP
如何通过View::first使用Laravel Blade的动态模板详解
2017/09/21 PHP
Yii2框架实现登录、退出及自动登录功能的方法详解
2017/10/24 PHP
php基于协程实现异步的方法分析
2019/07/17 PHP
php屏蔽错误及提示的方法
2020/05/10 PHP
jquery和ajax的关系详细介绍
2013/11/29 Javascript
JS选取DOM元素的简单方法
2016/07/08 Javascript
关于bootstrap日期转化,bootstrap-editable的简单使用,bootstrap-fileinput的使用详解
2017/05/12 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
浅谈Vue父子组件和非父子组件传值问题
2017/08/22 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
2018/11/26 Javascript
jQuery实现轮播图源码
2019/10/23 jQuery
JS操作字符串转数字的常见方法示例
2019/10/29 Javascript
vue基于better-scroll实现左右联动滑动页面
2020/06/30 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
[41:37]DOTA2北京网鱼队选拔赛——冲击职业之路
2015/04/13 DOTA
python实现数通设备tftp备份配置文件示例
2014/04/02 Python
Python查看多台服务器进程的脚本分享
2014/06/11 Python
Python使用os模块和fileinput模块来操作文件目录
2016/01/19 Python
Python处理文本文件中控制字符的方法
2017/02/07 Python
使用Python更换外网IP的方法
2018/07/09 Python
python 自动去除空行的实例
2018/07/24 Python
Window10下python3.7 安装与卸载教程图解
2019/09/30 Python
Python爬虫实现vip电影下载的示例代码
2020/04/20 Python
使用SimpleITK读取和保存NIfTI/DICOM文件实例
2020/07/01 Python
Python APScheduler执行使用方法详解
2020/12/10 Python
CSS3+DIV实现漂亮的动画彩色标签
2016/06/16 HTML / CSS
struct和class的区别
2015/11/20 面试题
音乐教学案例
2014/01/30 职场文书
英文感谢信格式
2015/01/21 职场文书
经典人生语录分享:不畏将来,不念过去,笑对当下
2019/12/12 职场文书
python全面解析接口返回数据
2022/02/12 Python