JavaScriptはモダリティダイアログのソースコードの大全を実現します.

39348 ワード

まず、ダイアログを説明します.
ダイアログはWindowsアプリケーションにおいて非常に一般的であり、多くのアプリケーションの設定は、ユーザーと対話するためにダイアログを通じて行われる必要があるため、ダイアログはWindowsアプリケーションの中で最も重要なインターフェース要素の一つであり、ユーザーと対話するための重要な手段である.ダイアログは特殊なウィンドウです.移動、最大化、最小化などのウィンドウの操作もダイアログで実行できます.
ダイアログは大きく分けて次の2つに分けられます.
(1)モーダルダイアログ:モーダルダイアログがイジェクトされた後、システムリソースが独占されました.ユーザーはこのダイアログを閉じた後でしか実行できません.ダイアログを閉じる前にアプリケーションの他の部分のコードを実行できません.モダリティダイアログは一般的にユーザーに何らかの選択を要求します.
(2)非モーダルダイアログ:非モーダルダイアログがポップアップした後、このダイアログを閉じないで実行し続けることができます.アプリケーションの他の部分のコードに移った場合、ユーザからの応答は不要です.非モーダルダイアログは、一般的に情報を表示するために使用されます.または、リアルタイムで設定されます.
モーダルウィンドウは伝統的なプログラミング言語でよく見られます.簡単に言えば、モーダルの場合、サブウィンドウを開けます.このサブウィンドウが閉じないと、親ウィンドウを操作できません.このモードウィンドウが閉まるまで、元のプログラムは実行を一時停止します.
モダリティではない場合は、直接表示し、元のプログラムは次のステートメントを実行し続け、他のウィンドウも利用可能な状態になります.
モードダイアログはユーザーの入力を独占しています.モードダイアログが開くと、ユーザーはこのダイアログとしか対話できません.他のユーザーインターフェースオブジェクトは情報を入力できません.アプリケーションで使用するほとんどのダイアログはモダリティダイアログです.
通常のブラウザでは、windwo.openまたはハイパーリンクでポップアップされる新しいウィンドウは、非モードウィンドウであり、モードウィンドウは、alertのような他のイベントに応答するウィンドウを閉じなければならない.
ダイアログのモダリティと非モーダルが分かりました.下のB/s構造アプリケーションの開発において、ユーザーがボタンを押して元のウィンドウの前にあるサブウィンドウを開けてほしいという場合があります.
IEでは、Windows.show ModelessDialog()を使用して、HTMLコンテンツを表示する非モーダルダイアログを作成することができます.window.show ModalDialog()メソッドはHTMLの内容を表示するモダリティダイアログを作成するために使用されます.ダイアログなので、一般的にwindow.open()で開いているウィンドウのすべての属性はありません.
ここはwindow.show ModalDialogポップアップウィンドウの実例関数です.
 
  
<!-- <br>function openWin(src, width, height, showScroll){ <br>window.showModalDialog <br>(src,"","location:No;status:No;help:No;dialogWidth:"+width+";dialogHeig <br>ht:"+height+";scroll:"+showScroll+";"); <br>} <br>// -->
例:
 
  

注意したいのはFireFoxブラウザではshowmodaldialogsはサポートされていません.これは最初のMozilaSuiteではshowmodaldialogsをサポートしていましたが、その後show modaldialogs()にセキュリティ上の潜在的なリスクがあることが分かりました.しばらくしてshow modaldialogsは194 404のサポートがキャンセルされました.より良い解決策を考える前に、Firefoxはshowmodaldialogs()のサポートを提供しないと信じています.
弾戸を開けるにはwindow.openしか使えません.window.openの文法は以下の通りです.
oNewWindow=window.open([s URL][,sName][,sFeature][,bReplace])
ただ、Firefoxの下で、window.openのパラメータの中で、sFeatureは機能設定を多くしています.FireFoxの下で開くウィンドウはIEのshow ModalDialogと同じなら、sFeatureの中にmodal=yesを追加すればいいです.安全を考慮してmodal=yesを開くのはモードウィンドウではないかもしれません.
 
  
oNewWindow = window.open( [sURL] [, sName] [, sFeatures] [, bReplace])
firefoxではshow ModalDialog方法がないからです.次のような判定を用いて、2つのブラウザを互換する.
 
  

<br><!-- <br>function showDialog(url) <br>{ <br>if( document.all ) //IE <br>{ <br>feature="dialogWidth:300px;dialogHeight:200px;status:no;help:no"; <br>window.showModalDialog(url,null,feature); <br>} <br>else <br>{ <br>//modelessDialog modal dialog=yes <br>feature ="width=300,height=200,menubar=no,toolbar=no,location=no,"; <br>feature+="scrollbars=no,status=no,modal=yes"; <br>window.open(url,null,feature); <br>} <br>} <br>//--> <br>
二、JavaScript+divモダリティダイアログを実現する:
163メールボックスダイアログのような機能です.主に2つの層でこの効果を達成します.まず、下のページ全体の層をロックすることです.透明な効果があれば、filter:alpha(opacity=50)を使えます.もう一つの階はダイアログの内容を表示するためのものですので、zIndexパラメータはロック層よりも高く設定しなければなりません.
ダイアログのCSSは自分で定義してもいいです.CSSでは、bodyは必ずmargin:0を定義します.そうでないと、周波数をロックする時に隙間ができて、周波数が不完全な問題が発生します.もう一つはSelectというコントロールの問題です.IEの中で、彼のzIndexが高いので、周波数をロックする層が彼をカバーできません.ここでは二つの方法を使って、一つは彼を隠します.一つは彼のdisabled属性をfalseに設定することができます.二つ目の方法は編集を禁止することしかできませんが、やはりロック層にだまされます.効果はよくないです.やはり隠したほうがいいです.
 
  

`````



<!-- <br>var t_DiglogX,t_DiglogY,t_DiglogW,t_DiglogH; <br>function StrCode(str) <br>{ <br>if(encodeURIComponent) <br>return encodeURIComponent(str); <br>if(escape) <br>return escape(str); <br>} <br> <br>function Browser() <br>{ <br>var ua, s, i; <br>this.isIE = false; <br>this.isNS = false; <br>this.isOP = false; <br>this.isSF = false; <br>ua = navigator.userAgent.toLowerCase(); <br>s = "opera"; <br>if ((i = ua.indexOf(s)) >= 0) <br>{ <br>this.isOP = true;return; <br>} <br>s = "msie"; <br>if ((i = ua.indexOf(s)) >= 0) <br>{ <br>this.isIE = true; <br>return; <br>} <br>s = "netscape6/"; <br>if ((i = ua.indexOf(s)) >= 0) <br>{ <br>this.isNS = true; <br>return; <br>} <br> <br>s = "gecko"; <br>if ((i = ua.indexOf(s)) >= 0) <br>{ <br>this.isNS = true; <br>return; <br>} <br> <br>s = "safari"; <br>if ((i = ua.indexOf(s)) >= 0) <br>{ <br>this.isSF = true; <br>return; <br>} <br>} <br> <br>function DialogShow(showdata,ow,oh,w,h) <br>{ <br>var objDialog = document.getElementById("DialogMove"); <br>if (!objDialog) <br>objDialog = document.createElement("div"); <br>t_DiglogW = ow; <br>t_DiglogH = oh; <br>DialogLoc(); <br>objDialog.id = "DialogMove"; <br>var oS = objDialog.style; <br>oS.display = "block"; <br>oS.top = t_DiglogY + "px"; <br>oS.left = t_DiglogX + "px"; <br>oS.margin = "0px"; <br>oS.padding = "0px"; <br>oS.width = w + "px"; <br>oS.height = h + "px"; <br>oS.position = "absolute"; <br>oS.zIndex = "5"; <br>oS.background = "#FFF"; <br>oS.border = "solid #000 1px"; <br>objDialog.innerHTML = showdata; <br>document.body.appendChild(objDialog); <br>} <br> <br>function DialogHide() <br>{ <br>ScreenClean(); <br>var objDialog = document.getElementById("DialogMove"); <br>if (objDialog) <br>objDialog.style.display = "none"; <br>} <br> <br>function DialogLoc() <br>{ <br>var dde = document.documentElement; <br>if (window.innerWidth){ <br>var ww = window.innerWidth; <br>var wh = window.innerHeight; <br>var bgX = window.pageXOffset; <br>var bgY = window.pageYOffset; <br>}else{ <br>var ww = dde.offsetWidth; <br>var wh = dde.offsetHeight; <br>var bgX = dde.scrollLeft; <br>var bgY = dde.scrollTop; <br>} <br>t_DiglogX = (bgX + ((ww - t_DiglogW)/2)); <br>t_DiglogY = (bgY + ((wh - t_DiglogH)/2)); <br>} <br> <br>function ScreenConvert(){ <br>var browser = new Browser(); <br>var objScreen = document.getElementById("ScreenOver"); <br>if(!objScreen) <br>var objScreen = document.createElement("div"); <br>var oS = objScreen.style; <br>objScreen.id = "ScreenOver"; <br>oS.display = "block"; <br>oS.top = oS.left = oS.margin = oS.padding = "0px"; <br>if (document.body.clientHeight) { <br>var wh = document.body.clientHeight + "px"; <br>}else if (window.innerHeight){ <br>var wh = window.innerHeight + "px"; <br>}else{ <br>var wh = "100%"; <br>} <br>oS.width = "100%"; <br>oS.height = wh; <br>oS.position = "absolute"; <br>oS.zIndex = "3"; <br>if ((!browser.isSF) && (!browser.isOP)){ <br>oS.background = "#cccccc"; <br>}else{ <br>oS.background = "#cccccc"; <br>} <br> <br>oS.filter = "alpha(opacity=50)"; <br>oS.opacity = 40/100; <br>oS.MozOpacity = 40/100; <br>document.body.appendChild(objScreen); <br>var allselect = document.getElementsByTagName("select"); <br>for (var i=0; i<allselect.length; i++) <br>allselect[i].style.visibility = "hidden"; <br>} <br> <br>function ScreenClean() <br>{ <br>var objScreen = document.getElementById("ScreenOver"); <br>if (objScreen) <br>objScreen.style.display = "none"; <br>var allselect = document.getElementsByTagName("select"); <br>for (var i=0; i<allselect.length; i++) <br>allselect[i].style.visibility = "visible"; <br>} <br> <br>function Demo(string) <br>{ <br>ScreenConvert(); <br>var ShowDiv="<div style="\" style="\""padding:10px;\">"+string+" <br /><br /><input type=\"button\" onclick=\"DialogHide();\" value=\" \"></div>"; <br>DialogShow(ShowDiv,250,120,300,100); <br>} <br>// -->








11 22




、Javascript
1. a.htm
window.showModalDialog("b.htm");
Html
2.b.htm
b.htm a.htm t1 ?
:
a.html
var results = window.showModalDialog("b.html");
(results){alert(results["key"]);}
b.html
<br>window.Value={key:" "} <br>
、 MessageBox


<!-- <br>// var MB_OK = 1; var MB_CANCEL = 2; var MB_YES = 4; var MB_NO = 8; /*================================================================================*/ /*================================================================================*/ //MessageBox // , , -coverIdStr // , dlgIdStr function CMessageBox(coverIdStr, dlgIdStr) { this.coverIdStr = coverIdStr; this.coverId = document.getElementById(this.coverIdStr); this.dlgIdStr = dlgIdStr; this.dlgId = document.getElementById(this.dlgIdStr); this.dlgCaptionId = null; this.dlgInfoId = null; this.dlgButtonsId = null; this.caption = ""; this.info = ""; this.buttons = MB_OK; this.returnValue = 0; // ,0 , MB_OK、MB_CANCEL、MB_YES、MB_NO this.DoModal = DoModal; this.IniDlg = IniDlg; this.ShowDlg = ShowDlg; } //caption //info ,HTML //buttons , ( ),HTML //objNameStr CMessageBox function DoModal(caption, info, buttons, objNameStr) { this.dlgId.innerHTML = "<div style="\" style="\""padding:0px;width:300px;background-color:buttonface;filter:alpha(opacity=100);" + "border-top:buttonhighlight 2px solid;" + "border-right:buttonshadow 2px solid;" + "border-bottom:buttonshadow 2px solid;" + "border-left:buttonhighlight 2px solid;" + "cursor:default;\" onselectstart=\"javascript:return false;\">" + " <div id=\"" + this.dlgIdStr + "_caption\" style="\" style="\""padding:2px;width:100%;background-color:#000066;text-align:left;color:#FFFFFF;\" onselectstart=\"javascript:return false;\"></div>" + " <div id=\"" + this.dlgIdStr + "_info\" style="\" style="\""padding:10px;width:100%;background-color:buttonface;text-align:center;color:#000000;\" onselectstart=\"javascript:return false;\"></div>" + " <div id=\"" + this.dlgIdStr + "_buttons\" style="\" style="\""padding:10px;width:100%;background-color:buttonface;text-align:center;color:#000000;\" onselectstart=\"javascript:return false;\"></div>" + "</div>"; this.dlgCaptionId = document.getElementById(this.dlgIdStr + "_caption"); this.dlgInfoId = document.getElementById(this.dlgIdStr + "_info"); this.dlgButtonsId = document.getElementById(this.dlgIdStr + "_buttons"); this.IniDlg(caption, info, buttons, objNameStr); this.ShowDlg(true); } // function IniDlg(caption, info, buttons, objNameStr) { this.dlgCaptionId.innerText = caption; this.dlgInfoId.innerHTML = info; this.dlgButtonsId.innerHTML = ""; if (parseInt(buttons/8) == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\"   \"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_NO);OnDlgReturn('" + objNameStr + "', MB_NO);\"> " + this.dlgButtonsId.innerHTML;// , buttons -= 8; } if (parseInt(buttons/4) == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\"   \"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_YES);OnDlgReturn('" + objNameStr + "', MB_YES);\"> " + this.dlgButtonsId.innerHTML; buttons -= 4; } if (parseInt(buttons/2) == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\" \"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_CANCEL);OnDlgReturn('" + objNameStr + "', MB_CANCEL);\"> " + this.dlgButtonsId.innerHTML; buttons -= 2; } if (buttons == 1) { this.dlgButtonsId.innerHTML = " <input type=\"button\" value=\" \"" + " onclick=\"javascript:" + objNameStr + ".ShowDlg(false, MB_OK);OnDlgReturn('" + objNameStr + "', MB_OK);\"> " + this.dlgButtonsId.innerHTML; } } // 、 , //display true- //display false- function ShowDlg(display, returnValue) { if (display) { ReSizeDlg(); this.coverId.style.display = "block"; } else { this.coverId.style.display = "none"; } this.returnValue = returnValue; } /*================================================================================*/ /*================================================================================*/ // // function OnDlgReturn(objNameStr, returnValue) { alert("CMessageBox " + objNameStr + " " + returnValue); } // cover // // id cover, 。 //document.body.onscroll document.body.onresize // CMessageBox function ReSizeDlg() { var cover = document.getElementById("cover"); cover.style.pixelTop = document.body.scrollTop; cover.style.pixelLeft = document.body.scrollLeft; cover.style.width = document.body.clientWidth; cover.style.height = document.body.clientHeight; } document.body.onscroll = ReSizeDlg; document.body.onresize = ReSizeDlg; /*================================================================================*/ /*================================================================================*/ var objDlg = new CMessageBox("cover", "dlg"); var objDlg2 = new CMessageBox("cover", "dlg"); <br>// -->

、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. , 。

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 >


, 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








asfsdfasdfasdf
<!-- <br>function show(){ <br>id1.style.height=window.screen.height+"px"; <br>id1.style.width=window.screen.width+"px"; <br>id1.style.display='block'; <br>id2.style.display='block' <br>} <br>function hide(){ <br>id1.style.display='none' <br>id2.style.display='none' <br>} <br>self.onError=null; <br>currentX = currentY = 0; <br>whichIt = null; <br>lastScrollX = 0; lastScrollY = 0; <br>NS = (document.layers) ? 1 : 0; <br>IE = (document.all) ? 1: 0; <br><!-- STALKER CODE --> <br>function heartBeat() { <br>if(IE) { diffY = document.body.scrollTop; diffX = document.body.scrollLeft; } if(NS) { diffY = self.pageYOffset; diffX = self.pageXOffset; } <br>if(diffY != lastScrollY) { <br>percent = .1 * (diffY - lastScrollY); <br>if(percent > 0) percent = Math.ceil(percent); <br>else percent = Math.floor(percent); <br>if(IE) document.all.id2.style.pixelTop += percent; <br>if(NS) document.id2.top += percent; <br>lastScrollY = lastScrollY + percent; <br>} <br>if(diffX != lastScrollX) { <br>percent = .1 * (diffX - lastScrollX); <br>if(percent > 0) percent = Math.ceil(percent); <br>else percent = Math.floor(percent); <br>if(IE) document.all.id2.style.pixelLeft += percent; <br>if(NS) document.id2.left += percent; <br>lastScrollX = lastScrollX + percent; <br>} <br>} <br><!-- /STALKER CODE --> <br><!-- DRAG DROP CODE --> <br>function checkFocus(x,y) { <br>stalkerx = document.id2.pageX; <br>stalkery = document.id2.pageY; <br>stalkerwidth = document.id2.clip.width; <br>stalkerheight = document.id2.clip.height; <br>if( (x > stalkerx && x < (stalkerx+stalkerwidth)) && (y > stalkery && y < (stalkery+stalkerheight))) return true; <br>else return false; <br>} <br>function grabIt(e) { <br>if(IE) { <br>whichIt = event.srcElement; <br>while (whichIt.id.indexOf("id2") == -1) { <br>whichIt = whichIt.parentElement; <br>if (whichIt == null) { return true; } <br>} <br>whichIt.style.pixelLeft = whichIt.offsetLeft; <br>whichIt.style.pixelTop = whichIt.offsetTop; <br>currentX = (event.clientX + document.body.scrollLeft); <br>currentY = (event.clientY + document.body.scrollTop); <br>} else { <br>window.captureEvents(Event.MOUSEMOVE); <br>if(checkFocus (e.pageX,e.pageY)) { <br>whichIt = document.id2; <br>stalkerTouchedX = e.pageX-document.id2.pageX; <br>StalkerTouchedY = e.pageY-document.id2.pageY; <br>} <br>} <br>return true; <br>} <br>function moveIt(e) { <br>if (whichIt == null) { return false; } <br>if(IE) { <br>newX = (event.clientX + document.body.scrollLeft); <br>newY = (event.clientY + document.body.scrollTop); <br>distanceX = (newX - currentX); distanceY = (newY - currentY); <br>currentX = newX; currentY = newY; <br>whichIt.style.pixelLeft += distanceX; <br>whichIt.style.pixelTop += distanceY; <br>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; <br>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; <br>event.returnValue = false; <br>} else { <br>whichIt.moveTo(e.pageX-StalkerTouchedX,e.pageY-StalkerTouchedY); <br>if(whichIt.left < 0+self.pageXOffset) whichIt.left = 0+self.pageXOffset; <br>if(whichIt.top < 0+self.pageYOffset) whichIt.top = 0+self.pageYOffset; <br>if( (whichIt.left + whichIt.clip.width) >= (window.innerWidth+self.pageXOffset-17)) whichIt.left = ((window.innerWidth+self.pageXOffset)-whichIt.clip.width)-17; <br>if( (whichIt.top + whichIt.clip.height) >= (window.innerHeight+self.pageYOffset-17)) whichIt.top = ((window.innerHeight+self.pageYOffset)-whichIt.clip.height)-17; <br>return false;} <br>return false; <br>} <br>function dropIt() { <br>whichIt = null; <br>if(NS) window.releaseEvents (Event.MOUSEMOVE); <br>return true; <br>} <br><!-- DRAG DROP CODE --> <br>if(NS) { <br>window.captureEvents(Event.MOUSEUP|Event.MOUSEDOWN); <br>window.onmousedown = grabIt; <br>window.onmousemove = moveIt; <br>window.onmouseup = dropIt; <br>} <br>if(IE) { <br>document.onmousedown = grabIt; <br>document.onmousemove = moveIt; <br>document.onmouseup = dropIt; <br>} <br>if(NS || IE) action = window.setInterval("heartBeat()",1) <br>// -->





, div innerhtml



123