www亚洲成人,青春草视频在线,成人看片黄a在线看

首先，來說一下對話框：
對話框在Windows應用程序中使用非常普遍，許多應用程序的設定，與用戶交互需要通過對話框來進行，因此對話框是Windows應用程序中最重要的界面元素之一，是與用戶交互的重要手段。對話框是一個特殊的窗口，任何對窗口進行的操作（如移動、最大化、最小化等）也可以在對話框實施。
對話框大致可以分為以下兩種：
（1）模態對話框：模態對話框彈出后，獨占了系統資源，用戶只有在關閉該對話框后才可以繼續執行，不能夠在關閉對話框之前執行應用程序其他部分的代碼。模態對話框一般要求用戶做出某種選擇。
（2）非模態對話框：非模態對話框彈出后，程序可以在不關閉該對話框的情況下繼續執行，在轉入到應用程序其他部分的代碼時可以不需要用戶做出響應。非模態對話框一般用來顯示信息，或者實時地進行一些設置。
模態窗口在傳統編程語言中很常見，簡單的說就是，如果是模態的，就是打開一個子窗口，如果這個子窗口不關閉，就不能操作它的父窗口，原來程序暫停執行，直到這個模態窗口關閉后才回到原來程序繼續。
非模態的就是直接顯示出來，然后原來的程序繼續執行下面的語句，而且其他窗口也呈可用狀態。
模態對話框獨占了用戶的輸入，當一個模態對話框打開時，用戶只能與該對話框進行交互，而其他用戶界面對象收不到輸入信息。應用程序用到的大部分對話框都是模態對話框。
通常瀏覽器中windwo.open或超鏈接彈出的新窗口就是非模式窗口,而模式窗口是類似alert那種必須關閉才能響應其他事件的窗口。
明白了對話框的模態和非模態，來看下邊在B/s結構應用程序的開發中,有時我們會希望使用者按下按鈕后開啟一個保持在原窗口前方的子窗口,
在IE中,我們可以使用window.showModelessDialog()方法用來創建一個顯示HTML內容的非模態對話框。window.showModalDialog()方法用來創建一個顯示HTML內容的模態對話框，由于是對話框，因此它并沒有一般用window.open()打開的窗口的所有屬性。
這里是window.showModalDialog彈出窗口的一個實例函數:
復制代碼代碼如下:
<script type="text/Javascript"></script>

例：
復制代碼代碼如下:
<span style="CURSOR: pointer" style="CURSOR: pointer" onclick="openWin
('http://www.jb51.NET', '500px', '400px', 'no')">點擊</span>

需要注意的是FireFox瀏覽器中不支持showmodaldialog() ，這是因為在最初MozillaSuite 中（Firefox 是從這個套件衍生），是支持 showmodaldialog()的，不過后來發現 showmodaldialog() 存在安全隱患，不久后就取消了對showmodaldialog() 的支持，這個事情還發生在 bug 194404 提交前。在想出更好的解決方案前，相信 Firefox 是不會提供對 showmodaldialog() 的支持的。

打開彈窗只能使用window.open實現這樣的功能，window.open的語法如下 :
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

只是,在Firefox下,window.open的參數中,sFeature多了一些功能設定,要讓FireFox下開啟的窗口跟IE的showModalDialog一樣的話, 只要在sFeatures中加個modal=yes就可以了,也許可能是出于安全考慮modal=yes，打開的并不是模式窗口，范例如下:
復制代碼代碼如下:
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])

由于在firefox沒有showModalDialog方法。則用如下判斷來兼容兩種瀏覽器：
復制代碼代碼如下:
<input type="button" value="打開對話框" onclick="showDialog('#')"/>
<SCRIPT LANGUAGE="JavaScript">

</SCRIPT>

二、JavaScript+div實現模態對話框：

一個類似163郵箱對話框的功能。主要是2個層來完成這個效果，第一就是用來鎖住下面整個頁面的層，要有透明的效果，可以用filter:alpha(opacity=50)。還有一個層是用來顯示對話框內容的，所以zIndex參數一定要設置的比鎖頻層高。

對話框的CSS可以自己定義一下，要注意的是，CSS中body一定要定義margin:0，否則鎖頻時，會出現空隙，而產生鎖頻不完整的問題，還有一個就是Select這個控件的問題，因為在IE里，他的zIndex很高，所以鎖頻層蓋不住他，這里可以用兩種辦法，一種是把他隱藏掉，一種可以把他的disabled屬性設置為false，第二種方法只能禁止編輯它，但是還是會在鎖頻層上當，效果不佳，還是隱藏掉比較好。
復制代碼代碼如下:
<html>
<title>`````</title>
<head>
<meta name="keywords" content="51windows.NET">
<meta http-equiv=content-type content="text/html; charset=gb2312">
<script type="text/Javascript"></script>
<style></style><style bogus="1">body{margin:0}</style>
</head>
<body>
<div style="border:1px solid;width:100%">
<div>
<input type="button" value="顯示對話框" onclick="Javascript:Demo('o(∩_∩)o...哈哈!');">
<select name=""><option value="" selected>1</option><option value="">2</option><option value="">2</option><option value="">2</option><option

value="">2</option></select>
<input type="text" name="" value="aaa">
<input type="radio" name="">11 <input type="checkbox" name="">22 <input type="password" name="" value="aaa">
</div>
</body>
</html>

三、Javascript模態對話框取父頁的值
1. a.htm 父頁
有 window.showModalDialog("b.htm");
有 Html元素 <input type="text" id="t1" name="t1" value="value">
2.b.htm 彈出頁面
能否在 b.htm 上取到 a.htm 中 t1值 ?
回答:
在a.html中設置
var results = window.showModalDialog("b.html");
(results){alert(results["key"]);}
在b.html中
<script>
window.Value={key:"返回到父頁面"}
</script>
四、模態對話框模仿MessageBox
復制代碼代碼如下:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>模態對話框</title> </head> <body> <div> <hr> </div>  <table width="100%" height="100%" id="cover" style="position:absolute;top:0px;left:0px;display:none;background-color:#666666;" onselectstart="Javascript:return false;"> <tr> <td id="dlg" width="100%" height="100%" align="center" valign="center"> </td> </tr> </table> <script type="text/Javascript" language="Javascript"></script> <input type="button" value="點我" onclick="Javascript:objDlg.DoModal('注意', '吃飯了', MB_OK, 'objDlg');"> <input type="button" value="然后點我" onclick="Javascript:objDlg2.DoModal('注意', '吃飯了？', MB_YES+MB_NO, 'objDlg2');"> </body> </html>

五、showModalDialog 打開的模態對話框有不少經典的缺陷，解決辦法

showModalDialog 打開的模態對話框有不少經典的缺陷，在這里不再冗述，我只談談最近碰到的幾個問題以及解決辦法。

問題1. showModalDialog 打開一個 ASPx 頁面時，如果該頁面在之前已經打開過一次，則自動會加載緩存中的頁面，而不能顯示最新數據。

解決的辦法有兩種：

(1). 在打開模態框時，給 url 后面多加一個隨機參數，來避免頁面被緩存：

var url = 'EditFlowNode.ASPx?flowId=0&id=2&x=' + Math.random();
var result = window.showModalDialog(url, '', 'status:no; help:no;');

(2). 在該 ASP.NET 頁面的 Page_Load 方法里設定不緩存：

protected void Page_Load(object sender, EventArgs e){
    Response.Expires = 0;
    Response.Cache.SetNoStore();
    Response.AppendHeader("Pragma", "no-cache");
}

問題2. 模態對話框中的內容和腳本加載次序不同，導致的問題。

緣起：考慮如下頁面的代碼

這個頁面，如果在普通的 IE 窗口中加載時，提示的信息是 "155"，而在模態對話框中執行時，其數值是 "0"。為什么會這樣？

我們注意到普通窗口打開該頁面時，當跳出 alert 對話框后，整個頁面元素都已經正常顯示了；而模態框在打開時，跳出 alert 對話框后，其背景卻是一片空白；等點擊“確定”后，才會顯示出網頁內容。
由此可以推測，模態框和普通頁面在解析執行 HTML 時的次序不同：

普通頁面：依次解析 body 中的元素，并隨即繪制(render)解析完的元素。如果碰到 script, 則立刻執行之。

模態對話框：依次解析 body 中的元素，但并未立即繪制(render)它們。如果碰到 script, 則立刻執行之。等 body 都加載完畢后，再依次繪制其中的元素。

由于以上我們示例代碼中訪問到了 offsetWidth 屬性，而我們可以推知，該屬性一定是當元素被繪制(render)完畢后，才會自動計算出有意義的數值。所以就導致了問題中看到的現象。

之所以考慮到這個問題，其實是因為我在模態對話框中使用一個第三方控件的時候，出現了 bug，經過調試發現根源的原因在于該控件采用了常用的代碼模式來輸出其 HTML。也就是在一段 HTML 輸出后，緊接著輸出其初始化腳本。（這個問題值得 ASP.NET 控件開發者引起注意）

幸運的是，我有這個控件的源代碼。因此修改源代碼解決了這個問題。我的解法類似于這樣：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head>
  <title> new document </title>
  <meta name="generator" content="editplus" />
  <meta name="author" content="" />
  <meta name="keywords" content="" />
  <meta name="description" content="" />
</head>

<body>
    <input id="txt1">
    <script type="text/Javascript">
    
    </script>
</body>
</html>

六、使用div仿Javascript模態窗口
復制代碼代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
<style type="text/css"></style><style type="text/css" bogus="1">#id1{width:100%;height:100%;background-color:#000;position:absolute;top:0;left:0;z-index:49;display:none;}
#id2{top:200px;position:absolute;z-index:50;display:none;border:3px solid #E5E5E5; left:100px;background-color:white;}</style>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>asfsdfasdfasdf</title>
<script language="Javascript" type="text/Javascript">
function heartBeat() {
if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; }
if(diffY != lastScrollY) {
percent = .1 * (diffY - lastScrollY);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.id2.style.pixelTop += percent;
if(NS) document.id2.top += percent;
lastScrollY = lastScrollY + percent;
}
if(diffX != lastScrollX) {
percent = .1 * (diffX - lastScrollX);
if(percent > 0) percent = Math.ceil(percent);
else percent = Math.floor(percent);
if(IE) document.all.id2.style.pixelLeft += percent;
if(NS) document.id2.left += percent;
lastScrollX = lastScrollX + percent;
}
}


function checkFocus(x,y) {
stalkerx = document.id2.pageX;
stalkery = document.id2.pageY;
stalkerwidth = document.id2.clip.width;
stalkerheight = document.id2.clip.height;
if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true;
else return false;
}
function grabIt(e) {
if(IE) {
whichIt = event.srcElement;
while (whichIt.id.indexOf("id2") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
} else {
window.captureEvents(Event.MOUSEMOVE);
if(checkFocus (e.pageX,e.pageY)) {
whichIt = document.id2;
stalkerTouchedX = e.pageX-document.id2.pageX;
StalkerTouchedY = e.pageY-document.id2.pageY;
}
}
return true;
}
function moveIt(e) {
if (whichIt == null) { return false; }
if(IE) {
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX); distanceY = (newY - currentY);
currentX = newX; currentY = newY;
whichIt.style.pixelLeft += distanceX;
whichIt.style.pixelTop += distanceY;
if(whichIt.style.pixelTop < document.body.scrollTop) whichIt.style.pixelTop = document.body.scrollTop; if(whichIt.style.pixelLeft < document.body.scrollLeft) whichIt.style.pixelLeft = document.body.scrollLeft; if(whichIt.style.pixelLeft > document.body.offsetWidth - document.body.scrollLeft - whichIt.style.pixelWidth - 20) whichIt.style.pixelLeft = document.body.offsetWidth - whichIt.style.pixelWidth - 20;
if(whichIt.style.pixelTop > document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5) whichIt.style.pixelTop = document.body.offsetHeight + document.body.scrollTop - whichIt.style.pixelHeight - 5;
event.returnValue = false;
} else {
whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY);
if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset;
if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset;
if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17;
if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17;
return false;}
return false;
}
function dropIt() {
whichIt = null;
if(NS) window.releaseEvents (Event.MOUSEMOVE);
return true;
}

if(NS) {
window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN);
window.onmousedown = grabIt;
window.onmousemove = moveIt;
window.onmouseup = dropIt;
}
if(IE) {
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
}
if(NS || IE) action = window.setInterval("heartBeat()",1)
// --></script>
</head>

<body>
<p> </p>
<div id="id2">
這里可以放內容，或者添加div用innerhtml進行添加內容就可以了
<br/><input name="Button1" type="button" value="button" onclick="hide()"/>
</div>
<div id="id1"> 123</div>

<form method="post">
<input name="Button2" type="button" value="button" onclick="show()"/></form>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<p> </p>
</body>

</html>

JavaScript技術：JavaScript 實現模態對話框源代碼大全，轉載需保留來源！

鄭重聲明：本文版權歸原作者所有，轉載文章僅為傳播更多信息之目的，如作者信息標記有誤，請第一時間聯系我們修改或刪除，多謝。

一区二区久久-一区二区三区www-一区二区三区久久-一区二区三区久久精品-麻豆国产一区二区在线观看-麻豆国产视频

JavaScript 實現模態對話框源代碼大全

相關文章閱讀