js實現(xiàn)簡單模態(tài)窗口，背景灰顯
更新時間：2008年11月14日 23:45:24 作者：
昨天中午做項目需要一個模態(tài)窗口，想起上一個公司的項目經理曾經做過一個比較牛的模態(tài)窗口，至今沒用搞清楚實現(xiàn)原理，平時也沒有時間去分析，試著自己做了一個，用了一天的時間終于完成了，給大家一起分享， 也希望高手多提意見。第一次在博客園上發(fā)文章，挺高興的。
沒什么好說的，都是js，用一個iframe將頁面遮擋，iframe上面一個div層，js面向對象做的，其中有部分是js動態(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 />
我來了！<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>
在線演示 http://img.jb51.net/online/ModeWindow/index.htm
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 />
我來了！<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>
在線演示 http://img.jb51.net/online/ModeWindow/index.htm
相關文章
javascript獲取URL參數(shù)與參數(shù)值的示例代碼
本篇文章主要是對javascript獲取URL參數(shù)與參數(shù)值的示例代碼進行了介紹，需要的朋友可以過來參考下，希望對大家有所幫助2013-12-12
JavaScript中的淺拷貝和深拷貝原理與實現(xiàn)淺析
這篇文章主要介紹了JavaScript中的淺拷貝和深拷貝原理與實現(xiàn)，JavaScript 中的淺拷貝和深拷貝指的是在復制對象（包括對象、數(shù)組等）時，是否只復制對象的引用地址或者在復制時創(chuàng)建一個新的對象2023-04-04
這篇文章主要為大家詳細介紹了 Bootstrap 3 瀏覽器兼容性問題及其對應的解決方案，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-04-04
微信小程序如何使用Promise對wx.request()封裝詳解(附完整代碼)
微信小程序的wx.request是微信小程序最早生成的數(shù)據(jù)庫傳輸模式,數(shù)據(jù)傳輸簡單明確,下面這篇文章主要給大家介紹了關于微信小程序如何使用Promise對wx.request()封裝的相關資料,需要的朋友可以參考下2023-03-03
本文主要介紹了js實現(xiàn)產品縮略圖效果的實例。具有很好的參考價值。下面跟著小編一起來看下吧2017-03-03
JavaScript作為一門解釋執(zhí)行的腳本語言,其變量作用域與傳統(tǒng)編譯型語言有著明顯的區(qū)別,本文將詳細介紹JavaScript中變量的作用域規(guī)則,以及利用閉包實現(xiàn)的常見作用域應用場景,幫助讀者進一步掌握JavaScript編程,感興趣的朋友跟隨小編一起看看吧2024-01-01
JavaScript根據(jù)數(shù)據(jù)生成百分比圖和柱狀圖的實例代碼
這篇文章介紹了JavaScript根據(jù)數(shù)據(jù)生成百分比圖和柱狀圖的實例代碼，有需要的朋友可以參考一下2013-07-07
單線程的同步等待極大影響效率，任務不得不一個一個等待執(zhí)行，對于網(wǎng)頁應用是無法接受的。所以Javascript使用事件循環(huán)機制來解決異步任務的問題。本文就來講講Javascript的事件循環(huán)機制，希望對你有所幫助2022-09-09
使用js提交表單想必大家都會，如果要實現(xiàn)一個頁面有多個提交按鈕，你會嗎？下面有個不錯的示例，大家可以感受下2013-11-11
3DM?文件格式是由?Rhinoceros?3D（簡稱?Rhino）軟件使用的原生文件格式,本文主要介紹了如何利用Javascript加載導出3dm文件,需要的可以參考下2024-11-11