js實(shí)現(xiàn)簡(jiǎn)單模態(tài)窗口，背景灰顯
更新時(shí)間：2008年11月14日 23:45:24 作者：
昨天中午做項(xiàng)目需要一個(gè)模態(tài)窗口，想起上一個(gè)公司的項(xiàng)目經(jīng)理曾經(jīng)做過(guò)一個(gè)比較牛的模態(tài)窗口，至今沒(méi)用搞清楚實(shí)現(xiàn)原理，平時(shí)也沒(méi)有時(shí)間去分析，試著自己做了一個(gè)，用了一天的時(shí)間終于完成了，給大家一起分享， 也希望高手多提意見(jiàn)。第一次在博客園上發(fā)文章，挺高興的。
沒(méi)什么好說(shuō)的，都是js，用一個(gè)iframe將頁(yè)面遮擋，iframe上面一個(gè)div層，js面向?qū)ο笞龅?，其中有部分是js動(dòng)態(tài)生成style。
ModeWindow.js
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="ModeWindow.js"></script>
<script language="javascript" type="text/javascript">
var myWin;
function show1(){
var divtest = document.getElementById("divtest");
divtest.style.display="block";
myWin = new ModeWindow(divtest,200,300,300,100,"i change!");
myWin.show();
}
function show2(){
var tbtest = document.getElementById("tbtest");
tbtest.style.display="block";
//myWin = new ModeWindow(tbtest);
myWin = new ModeWindow(tbtest,200,200,200,222,"hello world!");
myWin.show();
}
function Winclose()
{
myWin.close();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table id="tbtest" style="display: none">
<tr>
<td style="width: 100px">
<input id="Text6" type="text" /></td>
<td style="width: 100px">
<input type="button" onclick="Winclose()" value="close" /></td>
</tr>
</table>
<div id="divtest" style="display: none">
<br />
<br />
我來(lái)了！<input type="button" onclick="Winclose()" value="close" />
</div>
<div align="center">
<table width="800" height="500">
<tr>
<td style="width: 100px">
<input id="Text2" type="text" /></td>
<td style="width: 100px">
<input id="Text1" type="text" /></td>
<td style="width: 100px">
<input id="Text3" type="text" /></td>
<td style="width: 100px">
<input id="Text4" type="text" /></td>
<td style="width: 100px">
<input id="Text5" type="text" /></td>
</tr>
<tr>
<td style="width: 100px">
<input type="button" onclick="show2()" value="open table" /></td>
<td style="width: 100px">
<input type="button" onclick="show2()" value="open table" /></td>
<td style="width: 100px">
<input type="button" onclick="show2()" value="open table" /></td>
<td style="width: 100px">
<input type="button" onclick="show1()" value="open div" /></td>
<td style="width: 100px">
<input type="button" onclick="show1()" value="open div" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
在線(xiàn)演示 http://img.jb51.net/online/ModeWindow/index.htm
ModeWindow.js
復(fù)制代碼 代碼如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Untitled Page</title>
<script src="ModeWindow.js"></script>
<script language="javascript" type="text/javascript">
var myWin;
function show1(){
var divtest = document.getElementById("divtest");
divtest.style.display="block";
myWin = new ModeWindow(divtest,200,300,300,100,"i change!");
myWin.show();
}
function show2(){
var tbtest = document.getElementById("tbtest");
tbtest.style.display="block";
//myWin = new ModeWindow(tbtest);
myWin = new ModeWindow(tbtest,200,200,200,222,"hello world!");
myWin.show();
}
function Winclose()
{
myWin.close();
}
</script>
</head>
<body>
<form id="form1" runat="server">
<table id="tbtest" style="display: none">
<tr>
<td style="width: 100px">
<input id="Text6" type="text" /></td>
<td style="width: 100px">
<input type="button" onclick="Winclose()" value="close" /></td>
</tr>
</table>
<div id="divtest" style="display: none">
<br />
<br />
我來(lái)了！<input type="button" onclick="Winclose()" value="close" />
</div>
<div align="center">
<table width="800" height="500">
<tr>
<td style="width: 100px">
<input id="Text2" type="text" /></td>
<td style="width: 100px">
<input id="Text1" type="text" /></td>
<td style="width: 100px">
<input id="Text3" type="text" /></td>
<td style="width: 100px">
<input id="Text4" type="text" /></td>
<td style="width: 100px">
<input id="Text5" type="text" /></td>
</tr>
<tr>
<td style="width: 100px">
<input type="button" onclick="show2()" value="open table" /></td>
<td style="width: 100px">
<input type="button" onclick="show2()" value="open table" /></td>
<td style="width: 100px">
<input type="button" onclick="show2()" value="open table" /></td>
<td style="width: 100px">
<input type="button" onclick="show1()" value="open div" /></td>
<td style="width: 100px">
<input type="button" onclick="show1()" value="open div" /></td>
</tr>
</table>
</div>
</form>
</body>
</html>
在線(xiàn)演示 http://img.jb51.net/online/ModeWindow/index.htm
相關(guān)文章
javascript獲取URL參數(shù)與參數(shù)值的示例代碼
本篇文章主要是對(duì)javascript獲取URL參數(shù)與參數(shù)值的示例代碼進(jìn)行了介紹，需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2013-12-12
JavaScript中的淺拷貝和深拷貝原理與實(shí)現(xiàn)淺析
這篇文章主要介紹了JavaScript中的淺拷貝和深拷貝原理與實(shí)現(xiàn)，JavaScript 中的淺拷貝和深拷貝指的是在復(fù)制對(duì)象（包括對(duì)象、數(shù)組等）時(shí)，是否只復(fù)制對(duì)象的引用地址或者在復(fù)制時(shí)創(chuàng)建一個(gè)新的對(duì)象2023-04-04
這篇文章主要為大家詳細(xì)介紹了 Bootstrap 3 瀏覽器兼容性問(wèn)題及其對(duì)應(yīng)的解決方案，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-04-04
微信小程序如何使用Promise對(duì)wx.request()封裝詳解(附完整代碼)
微信小程序的wx.request是微信小程序最早生成的數(shù)據(jù)庫(kù)傳輸模式,數(shù)據(jù)傳輸簡(jiǎn)單明確,下面這篇文章主要給大家介紹了關(guān)于微信小程序如何使用Promise對(duì)wx.request()封裝的相關(guān)資料,需要的朋友可以參考下2023-03-03
本文主要介紹了js實(shí)現(xiàn)產(chǎn)品縮略圖效果的實(shí)例。具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
JavaScript作為一門(mén)解釋執(zhí)行的腳本語(yǔ)言,其變量作用域與傳統(tǒng)編譯型語(yǔ)言有著明顯的區(qū)別,本文將詳細(xì)介紹JavaScript中變量的作用域規(guī)則,以及利用閉包實(shí)現(xiàn)的常見(jiàn)作用域應(yīng)用場(chǎng)景,幫助讀者進(jìn)一步掌握J(rèn)avaScript編程,感興趣的朋友跟隨小編一起看看吧2024-01-01
JavaScript根據(jù)數(shù)據(jù)生成百分比圖和柱狀圖的實(shí)例代碼
這篇文章介紹了JavaScript根據(jù)數(shù)據(jù)生成百分比圖和柱狀圖的實(shí)例代碼，有需要的朋友可以參考一下2013-07-07
深入了解Javascript的事件循環(huán)機(jī)制
單線(xiàn)程的同步等待極大影響效率，任務(wù)不得不一個(gè)一個(gè)等待執(zhí)行，對(duì)于網(wǎng)頁(yè)應(yīng)用是無(wú)法接受的。所以Javascript使用事件循環(huán)機(jī)制來(lái)解決異步任務(wù)的問(wèn)題。本文就來(lái)講講Javascript的事件循環(huán)機(jī)制，希望對(duì)你有所幫助2022-09-09
巧用js提交表單輕松解決一個(gè)頁(yè)面有多個(gè)提交按鈕
使用js提交表單想必大家都會(huì)，如果要實(shí)現(xiàn)一個(gè)頁(yè)面有多個(gè)提交按鈕，你會(huì)嗎？下面有個(gè)不錯(cuò)的示例，大家可以感受下2013-11-11
3DM?文件格式是由?Rhinoceros?3D（簡(jiǎn)稱(chēng)?Rhino）軟件使用的原生文件格式,本文主要介紹了如何利用Javascript加載導(dǎo)出3dm文件,需要的可以參考下2024-11-11