當(dāng)前位置：首頁 > 人文社科 > 生活经验 >内容正文

生活经验

弹出窗口（对话框）

發(fā)布時(shí)間：2023/11/27 生活经验 29 豆豆

生活随笔收集整理的這篇文章主要介紹了弹出窗口（对话框）小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.

對(duì)話框分為三種：

window.open方法

無模式對(duì)話框

有模式對(duì)話框??
?
第一：OPEN方法

當(dāng)初為了實(shí)現(xiàn)這個(gè)簡單的交互操作，花費(fèi)了整整一下午的時(shí)間，關(guān)鍵是對(duì)JavaScript太生疏，自以為做Server端的東西才是本事，其實(shí)是犯了大錯(cuò)。

另外，如果在Js中引用.net Server端對(duì)象遇到對(duì)象為空的報(bào)錯(cuò)時(shí)，很有可能是對(duì)象在編譯后，VS對(duì)控件進(jìn)行了重命名。一開始這里不知道，害得我好苦

第二：無模式對(duì)話框：無模式對(duì)話框允許用戶在對(duì)話框打開的同時(shí)與原窗口進(jìn)行交互操作。在這種情況中，對(duì)話框保持在瀏覽器的上面并處于禁用狀態(tài)。如果用戶從原始文檔中移開進(jìn)行其它瀏覽，則無模式對(duì)話框?qū)⒈蛔詣?dòng)關(guān)閉，因?yàn)樵搶?duì)話框的所有上下文已經(jīng)喪失。高級(jí)搜索功能可以很好地使用這樣的對(duì)話框，以便使用戶可以選擇文檔中找到的文本，同時(shí)使對(duì)話框保持打開的狀態(tài)，這樣用戶就可以迅速地前進(jìn)到已找到文本的下一個(gè)實(shí)例。
第三：有模式對(duì)話框：有模式對(duì)話框常使程序可以使用戶完全集中于某一特定的對(duì)話框，并要求在繼續(xù)進(jìn)行之前與其進(jìn)行交互操作。這種情況的一個(gè)示例就是數(shù)據(jù)輸入操作，在該操作中，必須輸入某些數(shù)據(jù)后應(yīng)用程序才能繼續(xù)。
<HTML>
<BODY>
This?page?will?invoke?my?DHTML?dialog?box?when?the?button?is?clicked.
<BR>
<input?type='button'?onclick="showModalDialog('dcontent1.htm');"?value="Create?Dialog">
</BODY>
</HTML> 

<HTML>
<BODY?style="background-color:lightblue;margin:10;">
This?is?some?content?for?my?DHTML?dialog?box.
<BR>
<BR>
<input?type='button'?onclick="window.close();"?value="?OK?">
</BODY>
</HTML>

dialog1.htm 文件在單擊按鈕時(shí)執(zhí)行 showModalDialog 方法，并將第二個(gè)文件 dcontent1.htm 用作對(duì)話框的內(nèi)容。dcontent1.htm 文件具有一些 HTML 內(nèi)容和一個(gè) OK 按鈕，單擊該按鈕時(shí)會(huì)將對(duì)話框關(guān)閉。注意對(duì)話框是如何帶著一個(gè)狀態(tài)條出現(xiàn)的。它可以通過對(duì)函數(shù)的可選 sFeatures 參數(shù)的值進(jìn)行操作而去除。嘗試改變一下各參數(shù)的值，這可以顯示對(duì)話框的不同樣式。例如，您可以更改 dialog1.htm 中的方法調(diào)用去除狀態(tài)條并調(diào)整對(duì)話框的大小。

showModalDialog('dcontent1.htm','','status:no;resizable:yes');

現(xiàn)在，將方法由 showModalDialog 改為 showModelessDialog，并查看無模式對(duì)話框怎樣允許用戶與對(duì)話框下面的文檔進(jìn)行交互操作。您可以在 Web Workshop 的 DHTML 參考（英文）一節(jié)中查看關(guān)于所有對(duì)話框設(shè)置的完整說明。

<HTML>
<HEAD>
</HEAD>
<SCRIPT>
function?doDialog()
{
??var?x=showModalDialog('dcontent2.htm',ip1.value,'status:no;resizable:yes');
??d1.innerHTML="The?dialog?box?return?value?was:?"?+?x;
}
</SCRIPT>
<BODY>
This?page?will?invoke?my?DHTML?dialog?box?when?the?button?is?clicked.
<BR><BR>
<INPUT?type=text?id=ip1?value='input?content'>
<BR><BR>
<input?type='button'?onclick="doDialog()"?value="Create?Dialog">
<BR><BR>
<DIV?id=d1></DIV>
</BODY>
</HTML>



<HTML>
<BODY?style="background-color:lightblue;margin:10;"???onload="d1.innerHTML=dialogArguments;">
This?is?some?content?for?my?DHTML?dialog?box.
<BR><BR>
<DIV?id=d1></DIV>
<BR><BR>
<input?type='button'?onclick="returnValue=true;window.close();"?value="?OK?">?&nbsp&nbsp&nbsp
<input?type='button'?onclick="returnValue=false;window.close();"?value="?Cancel?">
</BODY>
</HTML>

dialog2.htm 文件調(diào)用 DHTML 對(duì)話框，后者將 dcontent2.htm 文件用作其內(nèi)容。輸入元素的值被傳遞到對(duì)話框中，對(duì)話框使用該值顯示內(nèi)容。返回值根據(jù)用戶對(duì) OK 或 Cancel 的選擇進(jìn)行設(shè)置。

在無模式對(duì)話框的情形中，返回值則有所不同。對(duì)話框?qū)⒈伙@示，但調(diào)用 showModelessDialog 的代碼將繼續(xù)運(yùn)行。對(duì)于無模式對(duì)話框，來自 showModelessDialog 的返回值為 DHTML 對(duì)話框中包含的文檔的 window 對(duì)象，它可以隨后用于與打開的對(duì)話框進(jìn)行通信。我們來看一下下面的無模式對(duì)話框的示例。在該示例中，在主頁面設(shè)置一個(gè)值可以影響到打開的對(duì)話框，并且在對(duì)話框中設(shè)置一個(gè)值也可以影響到主頁面。

<HTML>
<HEAD>
</HEAD>
<SCRIPT>
var?dWin=null;
function?doDialog()
{
dWin=showModelessDialog('dcontent3.htm',window,'status:no;resizable:yes');
}

function?setDialogValue()
{
??if?(dWin?!=?null)
??{
???dWin.d1.innerHTML=ip1.value;
??}
}
</SCRIPT>
<BODY>
This?page?will?invoke?my?DHTML?dialog?box?when?the?button?is?clicked.
<BR><BR>
<INPUT?type=text?id=ip1?value='input?content'>
<BR><BR>
<input?type='button'?onclick="setDialogValue();"?value="Set?Dialog?Value">
<BR><BR>
<input?type='button'?onclick="doDialog();"?value="Create?Dialog">
<BR><BR>
<DIV?id=d1></DIV>
</BODY>
</HTML>



<HTML>
<SCRIPT>
function?window.onunload()
{
??dialogArguments.dWin=null;
}
</SCRIPT>

<BODY?style="background-color:lightblue;margin:10;">
This?is?some?content?for?my?DHTML?dialog?box.
<BR><BR>
<DIV?id=d1></DIV>
<BR><BR>
<input?type='text'?id=ip1?onclick='dialogArguments.d1.innerHTML=ip1.value;'>
<BR><BR>
<input?type='button'?onclick="dialogArguments.d1.innerHTML=ip1.value;"?value="?Apply?">?&nbsp&nbsp&nbsp
<input?type='button'?onclick="dialogArguments.d1.innerHTML=ip1.value;window.close();"?value="?OK?">
&nbsp&nbsp&nbsp
<input?type='button'?onclick="window.close();"?value="?Cancel?">

</BODY>
</HTML>

<SCRIPT>
function?fnRandom(iModifier){
????return?parseInt(Math.random()*iModifier);
}
function?fnSetValues(){
????var?iHeight=oForm.oHeight.options[oForm.oHeight.selectedIndex].text;
????if(iHeight.indexOf("Random")>-1){
????????iHeight=fnRandom(document.body.clientHeight);
????}
????var?iWidth=oForm.oWidth.options[oForm.oWidth.selectedIndex].text;
????if(iWidth.indexOf("Random")>-1){
????????iWidth=fnRandom(document.body.clientWidth);
????}
????var?iTop=oForm.oTop.options[oForm.oTop.selectedIndex].text;
????if(iTop.indexOf("Random")>-1){
????????iTop=fnRandom(screen.height);
????}
????var?iLeft=oForm.oLeft.options[oForm.oLeft.selectedIndex].text;
????if(iLeft.indexOf("Random")>-1){
????????iLeft=fnRandom(screen.width);
????}
????var?sEdge=oForm.oEdge.options[oForm.oEdge.selectedIndex].text;
????var?bCenter=oForm.oCenter.options[oForm.oCenter.selectedIndex].text;
????var?bHelp=oForm.oHelp.options[oForm.oHelp.selectedIndex].text;
????var?bResize=oForm.oResize.options[oForm.oResize.selectedIndex].text;
????var?bStatus=oForm.oStatus.options[oForm.oStatus.selectedIndex].text;
????
????var?sFeatures="dialogHeight:?"?+?iHeight?+?"px;?dialogWidth:?"?+?iWidth?+?"px;?dialogTop:?"?+?iTop?+?"px;?dialogLeft:?"?+?iLeft?+?"px;?edge:?"?+?sEdge?+?";?center:?"?+?bCenter?+?";?help:?"?+?bHelp?+?";?resizable:?"?+?bResize?+?";?status:?"?+?bStatus?+?";";
????
????return?sFeatures;
}
function?fnOpen(){
/**//*?The??method?constructor?looks?like:
????showModalDialog(
????????sURL="The?page?that?is?opened"
????????sArguments="Extra?values?or?object?references"
????????sFeatures="features?of?the?window";
????
????)
*/
????var?sFeatures=fnSetValues();
????oFeatures.innerHTML='window.showModalDialog("SMD_target.htm","'?+?oForm.oArguments.value?+?'","'?+?sFeatures?+?'");';
????window.showModalDialog("SMD_target.htm",?oForm.oArguments.value,?sFeatures)
}
</SCRIPT>

轉(zhuǎn)載于:https://www.cnblogs.com/mjgforever/archive/2006/03/07/344760.html

總結(jié)

以上是生活随笔為你收集整理的弹出窗口（对话框）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。