如何创建一个JavaScript弹出DIV窗口层的效果
\u5982\u4f55\u521b\u5efa\u4e00\u4e2aJavaScript\u5f39\u51faDIV\u7a97\u53e3\u5c42\u7684\u6548\u679c111132132
\u5b9e\u73b0\u539f\u7406\uff1a
\u9996\u5148\uff0c\u6211\u4eec\u5c06\u5f39\u51fa\u6846\u4e2d\u7684\u5185\u5bb9\u653e\u7f6e\u5728\u4e00\u4e2a\u7279\u6b8a\u7684DIV\u5c42\u4e2d\uff0c\u7136\u540e\u9ed8\u8ba4\u9690\u85cf\u5b83\uff08\u5373\u521d\u59cb\u4e0d\u53ef
\u89c1\uff0c\u4f7f\u7528CSS\u5373\u53ef\u5b9e\u73b0\uff09\u3002\u5f53\u7528\u6237\u6267\u884c\u67d0\u4e2a\u52a8\u4f5c\u65f6\u2014\u2014\u6bd4\u5982\u70b9\u51fb\u67d0\u4e2a\u94fe\u63a5\u6216\u8005\u5c06\u9f20\u6807\u5149\u6807\u79fb\u52a8\u5230\u67d0\u4e2a\u94fe\u63a5\u4e0a\u2014\u2014\u6211\u4eec\u5c06\u4e4b\u524d\u8bbe\u7f6e\u597d\u7684\u9690\u85cf\u5c42\u663e\u793a\u5728\u6240\u6709\u9875\u9762\u5143\u7d20\u7684
\u6700\u4e0a\u5c42\uff08\u5c06\u4f7f\u7528JS\u64cd\u4f5c\u5b9e\u73b0\uff09\u3002\u6b64\u5916\uff0c\u6211\u4eec\u8fd8\u5c06\u5728\u5f39\u51faDIV\u7a97\u53e3\u4e2d\u8bbe\u7f6e\u4e00\u4e2a\u6309\u94ae\u6765\u6267\u884c\u2014\u2014\u5f53\u7528\u6237\u70b9\u51fb\u6b64\u6309\u94ae\u65f6\u5173\u95ed\u7a97\u53e3\u7684\u529f\u80fd\u3002
\u5b9e\u73b0\u8fc7\u7a0b\uff1a
\u5c31\u5982\u6211\u4e0a\u9762\u63d0\u5230\u7684\uff0c\u6211\u4eec\u9996\u5148\u9700\u8981\u521b\u5efa\u4e00\u4e2a\u7279\u6b8a\u7684DIV\u5c42\uff0c\u7136\u540e\u6211\u4eec\u5c06\u5f39\u51fa\u7a97\u53e3\u7684\u5185\u5bb9\u653e\u5728\u8fd9\u4e2aDIV\u5c42\u91cc\u9762\u3002\u5728\u8fd9\u91cc\uff0c\u6211\u4eec\u5c06\u5176ID\u547d\u540d\u4e3a\u201cpopupcontent \u201d\u4ee5\u533a\u522b\u4e8e\u5176\u4ed6DIV\u5c42\u3002
\u8fd9\u662f\u4e00\u4e2aDIV\u5f39\u7a97\u6548\u679c!
\u5f39\u51fa\u7a97\u53e3\u7684CSS\u4fee\u9970\u4ee3\u7801\uff1a
\u63a5
\u4e0b\u6765\uff0c\u8ba9\u6211\u4eec\u7ed9\u4e0a\u9762\u5df2\u521b\u5efa\u597d\u7684\u8fd9\u4e2aDIV\u5f39\u51fa\u5c42\u8fdb\u884cCSS\u7f8e\u5316\u3002\u5176\u4e2d\u6700\u91cd\u8981\u7684\u51e0\u4e2a\u53c2\u6570\u5206\u522b\u662f\uff1aoverflow\uff08\u5185\u5bb9\u6ea2\u51fa\uff09,
visibility\uff08\u53ef\u89c1\u6027\uff09
\u548cposition\uff08\u5b9a\u4f4d\u65b9\u5f0f\uff09\u3002\u540c\u65f6\u6211\u4e5f\u7ed9\u8fd9\u4e2a\u7a97\u53e3\u6548\u679c\u6dfb\u52a0\u4e86\u5f88\u591a\u5176\u4ed6\u4ee3\u7801\uff0c\u4f46\u8fd9\u4e9b\u53ea\u662f\u7528\u4e8e\u7f8e\u5316\uff0c\u4f7f\u8fd9\u4e2a\u7a97\u53e3\u66f4\u7eda\u4e3d\u3002\u6240\u4ee5\uff0c\u6211\u4eec\u6700\u540e\u5b9a\u4e49\u7684CSS\u4ee3\u7801\u5f62
\u5982\uff1a
\u590d\u5236\u4ee3\u7801 \u4ee3\u7801\u5982\u4e0b:
#popupcontent{
position: absolute;
visibility: hidden;
overflow: hidden;
border:1px solid #CCC;
background-color:#F9F9F9;
border:1px solid #333;
padding:5px;
}
\u4ece\u4e0a\u9762CSS\u4ee3\u7801\u4e2d\u7684\u7ea2\u8272\u90e8\u5206\u53ef\u4ee5\u770b\u51fa\uff1a\u8fd9\u4e2aDIV\u5c42\u521d\u59cb\u9ed8\u8ba4\u72b6\u6001\u662f\u4e0d\u53ef\u89c1\u7684\u3002
\u5927\u5bb6\u53ef\u4ee5\u6839\u636e\u9700\u8981\u5bf9\u4ee5\u4e0a\u4ee3\u7801\u8fdb\u884c\u7f8e\u5316\uff0c\u4f46\u8bf7\u52a1\u5fc5\u4fdd\u7559position\uff0cvisibility\uff0coverflow\u4e09\u4e2a\u5c5e\u6027\u3002
JavaScript\u4ee3\u7801\u7528\u4e8e\u89e6\u53d1\u548c\u663e\u793a\u5f39\u51fa\u7a97\u53e3\uff1a
\u8fd9\u53ef\u80fd\u662f\u672c\u6559\u7a0b\u6700\u91cd\u8981\u6700\u6709\u8da3\u7684\u5730\u65b9\u4e86\u3002\u6211\u4eec\u63a5\u4e0b\u6765\u4f1a\u7f16\u51992\u4e2a\u8fc7\u7a0b\u51fd\u6570\u5206\u522b\u7528\u4e8e\u663e\u793a\u548c\u9690\u85cf\u4e0a\u9762\u90a3\u4e2aDIV\u5f39\u7a97\u3002\u5f53\u7136\uff0c\u8fd9\u4e24\u4e2a\u51fd\u6570\u4e4b\u4e2d\u4f1a\u5305\u542b\u4e00\u4e9b\u4e3b\u4f53\u903b\u8f91\u3002
实现原理：
首先，我们将弹出框中的内容放置在一个特殊的DIV层中，然后默认隐藏它（即初始不可
见，使用CSS即可实现）。当用户执行某个动作时——比如点击某个链接或者将鼠标光标移动到某个链接上——我们将之前设置好的隐藏层显示在所有页面元素的
最上层（将使用JS操作实现）。此外，我们还将在弹出DIV窗口中设置一个按钮来执行——当用户点击此按钮时关闭窗口的功能。
实现过程：
就如我上面提到的，我们首先需要创建一个特殊的DIV层，然后我们将弹出窗口的内容放在这个DIV层里面。在这里，我们将其ID命名为“popupcontent ”以区别于其他DIV层。
<div id="popupcontent">这是一个DIV弹窗效果!</div>
弹出窗口的CSS修饰代码：
接
下来，让我们给上面已创建好的这个DIV弹出层进行CSS美化。其中最重要的几个参数分别是：overflow（内容溢出）,
visibility（可见性）
和position（定位方式）。同时我也给这个窗口效果添加了很多其他代码，但这些只是用于美化，使这个窗口更绚丽。所以，我们最后定义的CSS代码形
如：
复制代码 代码如下:
#popupcontent{
position: absolute;
visibility: hidden;
overflow: hidden;
border:1px solid #CCC;
background-color:#F9F9F9;
border:1px solid #333;
padding:5px;
}
从上面CSS代码中的红色部分可以看出：这个DIV层初始默认状态是不可见的。
大家可以根据需要对以上代码进行美化，但请务必保留position，visibility，overflow三个属性。
JavaScript代码用于触发和显示弹出窗口：
这可能是本教程最重要最有趣的地方了。我们接下来会编写2个过程函数分别用于显示和隐藏上面那个DIV弹窗。当然，这两个函数之中会包含一些主体逻辑。
过程函数中需要顺序包含的逻辑：
计算JavaScript弹出窗口在屏幕上的显示位置（定位）；
在弹出窗口中添加一个状态栏（或按钮），用于关闭打开状态下的窗口；
显示弹出窗口。
为了简单起见，本例中我们设置的显示位置是Top：200，Left：200。即以浏览器内容框的左上角为坐标，向下偏移200PX，向左偏移200PX。
弹出窗口的大小我们可以在显示函数的参数中进行设置，包括两个参数：窗口长度和窗口宽度。
如果你需要将本例中的代码进行二次开发，有个地方需要特别注意，那就是获取弹出窗口DIV层的DOM对象，我们可以通过下面这个getElementById函数来获取ID名为“Popcontent”的DOM对象。
复制代码 代码如下:
var popUp = document.getElementById("popupcontent");
在获取这个（弹出窗口）DOM对象之后，我们可以在JS代码中修改窗口的相对的位置和窗口大小。
复制代码 代码如下:
popUp.style.top = "200px";//窗口距离浏览器内容区最上方的偏移值
popUp.style.left = "200px";//窗口距离浏览器内容区最左边的偏移值
popUp.style.width = w + "px";//窗口的宽度
popUp.style.height = h + "px";//窗口的高度
接
下来，我们需要给窗口添加一个“关闭”按钮，用于在窗口开启状态下关闭这个窗口。要完美的实现这一功能，首先我们需要声明一个全局变量，用于存储弹出窗口
DIV中的内容。这是因为，如果你在一个页面中显示多个内容不同的弹出窗口，你不需要将按钮重复的复制到这些DIV层中，这样就简化了行为逻辑：
复制代码 代码如下:
if (baseText == null) baseText = popUp.innerHTML;
popUp.innerHTML = baseText +
"<div id=\"statusbar\"><button onclick=\"hidePopup();\">Close window <button></div>";
最后一个需要注意的地方是这个“关闭”按钮的定位问题。这个很容易实现，设置一下这个按钮对象的向上的空白边即可（空白边的数值设置成稍小于整个弹出窗口的DIV高度即可）。
至此，所有的行为逻辑讲解完毕，最后的弹窗显示函数的完整代码如下：
复制代码 代码如下:
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\"><button onclick=\"hidePopup();
\">Close window<button></div>";
var sbar = document.getElementById("statusbar");
sbar.style.marginTop = (parseInt(h)-40) + "px";
popUp.style.visibility = "visible";
}
隐藏弹出窗口：
隐藏弹出窗口的过程就相当简单了。只需要首先获取弹出窗口那个DIV的DOM对象，然后将其属性设置成“隐藏”即可。
复制代码 代码如下:
function hidePopup(){
var popUp = document.getElementById("popupcontent");
popUp.style.visibility = "hidden";
}
拓展HTML代码最终实现弹窗效果：
我们需要做的就是在某个链接或者按钮的对应事件上添加JS函数“showPopup() ”即可。
比如，需要在鼠标移动到某连接上时弹出窗口：
<a href="#" onmouseover="showPopup(300,200);" >Open popup</a>
需要在鼠标点击某个连接时弹出窗口：
<a href="#" onclick="showPopup(300,200);" >Open popup</a>
绛旓細鍦JavaScript涓紝閫氳繃浣跨敤new鍏抽敭瀛楀拰鏋勯犲嚱鏁版潵鍒涘缓JS瀹炰緥銆備緥濡傦紝鎴戜滑鍙互浣跨敤Date()鏋勯犲嚱鏁鍒涘缓涓涓鏃ユ湡瀵硅薄锛屾柟娉曞涓嬶細var myDate=new Date();杩欐牱鎴戜滑灏卞垱寤轰簡涓涓悕涓簃yDate鐨凧S瀹炰緥锛岄噷闈㈠寘鍚簡Date()鏋勯犲嚱鏁颁腑瀹氫箟鐨勫悇绉嶅睘鎬у拰鏂规硶銆傛帴涓嬫潵锛屾垜浠彲浠ユ牴鎹渶瑕佷娇鐢ㄨ繖浜涘睘鎬у拰鏂规硶鏉ュ疄鐜板叿浣撶殑鍔熻兘...
绛旓細濡傛灉鏄畝鍗曠殑鍙樻垚锛岀洿鎺ュ啓鍦╤tml鏂囦欢涓紝涓嶉渶瑕佸彟澶栫殑鏂囦欢 function test(){ alert("This is a function");} </scrip> 浠ｇ爜鍙互鏀惧湪浠讳綍浣嶇疆锛屽缓璁湪涓庝箣闂 濡傛灉鍐呭姣旇緝澶氾紝鍙互鏀惧埌鍗曠嫭鐨勬枃浠讹紝鍚庣紑涓 .js 鐒跺悗浣跨敤 鍗冲彲銆
绛旓細javascript寮鍚殑鏂规硶灏辨槸鍦–hrome娴忚鍣ㄧ殑鍦板潃鏍忎腑杈撳叆缃戝潃锛屽苟鎸変笅Enter閿嵆鍙JavaScript鏄竴绉嶅箍娉涗娇鐢ㄧ殑瀹㈡埛绔剼鏈瑷锛屽彲鐢ㄤ簬澧炲己缃戦〉涓殑浜や簰鎬у拰鍔熻兘鎬с傛棤璁烘偍鏄涓涓鏂版墜杩樻槸涓涓湁缁忛獙鐨勫紑鍙戣咃紝閮介渶瑕佺煡閬濡備綍寮鍚疛avaScript锛屾墠鑳戒娇鐢ㄥ畠鐨勮澶氬姛鑳姐侸avaScript鍙互鍦ㄧ敤鎴风殑娴忚鍣ㄤ笂杩愯锛岀敤鏉ュ寮...
绛旓細涓銆JavaScript鐨勫熀鏈畾涔 JavaScript鏄竴绉嶈В閲婂瀷璇█锛屾渶鍒濈敱Netscape鍏徃鐨凚rendan Eich璁捐锛屽叾鏈鍒濈洰鐨勬槸涓虹綉椤垫彁渚涘姩鎬佸拰浜や簰鎬х殑鍔熻兘銆傜幇鍦紝瀹冨凡鎴愪负Web寮鍙戠殑鏍稿績鎶鏈箣涓锛屽嚑涔庢墍鏈夌幇浠ｆ祻瑙堝櫒閮芥敮鎸丣avaScript銆備簩銆丣avaScript鐨勪富瑕佺敤閫 1. 澧炲己缃戦〉浜や簰鎬э細JavaScript鍏佽寮鍙戣鍒涘缓鍝嶅簲鐢ㄦ埛鎿嶄綔鐨勫姩鎬...
绛旓細瀵嗙爜楠岃瘉鍦JavaScript涓氬父闇瑕佹弧瓒崇壒瀹氳鍒欙紝姣斿鍖呭惈澶у皬鍐欏瓧姣嶃佹暟瀛楀拰鐗规畩绗﹀彿锛岄暱搴﹀湪8鍒16浣嶄箣闂淬傝瀹炵幇杩欎釜鍔熻兘锛屾垜浠彲浠ュ熷姪姝ｅ垯琛ㄨ揪寮忋備笅闈紝璁╂垜浠竴姝ユ鏋勫缓杩欎釜姝ｅ垯琛ㄨ揪寮忓苟楠岃瘉瀵嗙爜銆傞鍏堬紝鎴戜滑闇瑕佸湪JavaScript鐨剆cript閮ㄥ垎鍒涘缓涓涓鍑芥暟锛岃繖涓嚱鏁扮殑鏍稿績鏄娇鐢ㄦ鍒欒〃杈惧紡鏉ユ鏌ヨ緭鍏ョ殑瀛楃涓叉槸鍚︾鍚...
绛旓細濡傛灉瑕佸疄鐜扳滅洿鎺ユ彃鍏ユ柟寮忊濅腑鎵涓句緥瀛愮殑鏁堟灉,鍙互棣栧厛鍒涘缓涓涓狫avascript婧愪唬鐮佹枃浠垛淪cript.js鈥,鍏跺唴瀹瑰涓:document.writeln("杩欐槸Javascript!閲囩敤鐩存帴鎻掑叆鐨勬柟娉!");鍦ㄧ綉椤典腑鍙互杩欐牱璋冪敤绋嬪簭: 銆備簩銆丣avascript鍩烘湰姒傚康鍦ㄨ繖閲屽彧浣滅畝鍗曚粙缁,鍦ㄤ互鍚庣殑渚嬪瓙涓粨绋嬪簭鍐嶄綔鍏蜂綋瑙ｉ噴鍏朵綔鐢ㄣ1銆佽繍绠楃杩愮畻绗﹀氨鏄畬鎴愭搷鍜...
绛旓細JavaScript鍒涘缓瀵硅薄鐨勫嚑绉嶆柟寮 娼滄剰璇嗛噷锛孞avaScript涓嶈兘绠楁槸闈㈠悜瀵硅薄鐨勮瑷,瑕佺畻涔熷彧鑳借鏄秼鍚戦潰鍚戝璞＄殑涓绉嶈瑷锛岃嚦灏戝畠涓嶈兘寰堝ソ鐨勫惢鍚堥潰鍚戝璞℃渶鍩烘湰鐨勪笁澶х壒鎬(缁ф壙銆佸皝瑁呫佸鎬),褰撶劧鏈夊緢澶氫汉灏辫涓篔avaScript鏄潰鍚戝璞¤瑷,濂藉儚涔熻寰楁病閿欙紝鍥犱负闈㈠悜瀵硅薄涔熻兘鍦↗avaScript涓疄鐜,姣斿璇寸户鎵裤佸皝瑁呭惂涔...
绛旓細javascript涓嶉渶瑕佸缓鐗瑰埆椤圭洰 鍙鍐檋tml鎴杍sp椤甸潰灏卞彲浠ュ啓javascript浠ｇ爜
绛旓細鏂规硶浜岋細瀹氫箟鏈煡闀垮害鐨勪簩缁存暟缁 var tArray = new Array(); //鍏堝０鏄庝竴缁存暟缁 for(var k=0;k<i;k++) //涓缁存暟缁勯暱搴︿负i锛宨涓哄彉閲忥紝鍙互鏍规嵁瀹為檯鎯呭喌鏀瑰彉 { tArray[k]=new Array(); //澹版槑浜岀淮锛屾瘡涓涓涓缁存暟缁勯噷闈㈢殑涓涓厓绱犻兘鏄竴涓暟缁 for(var j=0;j...
