编程 Javascript

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>

js弹出窗口之弹出层的小例子

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

jquery ajax提交表单数据的两种方式

Nov 24 Javascript

jQuery ajax BUG：object doesn't support this property or method

Jul 06 Javascript

jquery实现excel导出的方法

Apr 04 Javascript

如何用JavaScript动态呼叫函数(两种方式)

May 03 Javascript

原生Js实现简易烟花爆炸效果的方法

Mar 20 Javascript

JQuery异步加载PartialView的方法

Jun 07 Javascript

微信小程序模拟cookie的实现

Jun 20 Javascript

教你如何用node连接redis的示例代码

Jul 12 Javascript

微信小程序 JS动态修改样式的实现方法

Dec 16 Javascript

vue自定义指令实现方法详解

Feb 11 Javascript

javascript设计模式 ? 解释器模式原理与用法实例分析

Apr 17 Javascript

threejs太阳光与阴影效果实例代码

Apr 05 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