JS 모달 대화 상자와 넌모달 대화 상자 조작 기술 요약_기본 지식

모달창 자바스크립트 스킬 요약(값 전달, 열기, 새로고침)
1. 팝업되는 페이지에서 head> 태그를 사용하지 않으면 모달 창이 팝업되고, 버튼을 클릭하면 새 페이지가 다시 팝업됩니다.
2. 페이지를 팝업하는 버튼의 이벤트 처리에는 현재 모달 창을 닫는 Response.Write(new Function().ClosePage()) 문이 있어야 합니다.
3. 우스꽝스러운 캐싱 사유로 인해 모달 창에서 데이터를 수정하면 상위 페이지의 데이터가 새로 고쳐지는 것을 볼 수 있는데, 다시 버튼을 클릭하면 모달 창이 다시 팝업됩니다. 모달 창의 내용이 여전히 지난 번과 동일하다는 사실을 발견했습니다. 실험 후 html 코드를 수동으로 변경한 후에도 팝업 모달 창을 클릭하면 여전히 동일한 페이지가 나타납니다. aspx 페이지 뒤에 임의의 매개변수를 추가하면 여기에서 우회할 수 있습니다. 이 문제를 피하기 위해 위 모달 창 코드를 다음과 같이 변경할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

public string ModalWindow(string openAspxPage,int width,int height)
{
string js = string.Format("javascript:window.showModalDialog("{0}&rand=" new Random ().Next ().ToString() "",window,"status:false;dialogWidth:{1}px;dialogHeight:{2}px")",openAspxPage,width,height);
return js;
}

빨간색으로 표시된 일부 매개변수는 사용자 정의된 매개변수입니다. 이 매개변수는 전체 프로젝트에서 유일한 변경 이름이어야 하며 의미가 없습니다(가장 안전한 방법은 이 변경 이름을 다음과 같이 지정하는 것입니다. lakjsdflawdfqwoifa 이름).
기본적으로 위 조건이 충족된다면 페이지 생성 시 모달창을 조작하는 것이 비교적 간단합니다.
//---------------------------------- ------------------------------------- ----------------
모달 창 - 가끔 매우 유용하다고 생각하게 만드는 창
b/s 구조 프로젝트인 showModalDialog 및 showModelessDialog 사용에 대해 팝업되는 창 window.open을 사용하는 것이 일부 광고 차단 도구에 의해 차단됩니다. 문제를 해결하려면 showModalDialog를 사용할 수밖에 없습니다. 그러나 showModalDialog의 단점은 페이지 간 값을 전송하기가 너무 번거롭다는 것입니다(두 가지 방법이 있습니다). 값을 전송하는 것). 그러나 실제로 이 가로채기 문제를 해결하는 다른 방법은 없으며 유일한 방법은 이것을 사용하는 것입니다. 코드는 단 두번의 스트로크로 작성했는데, 코드 디버깅을 하다가 문제가 발견되었습니다. 마지막으로 단일 단계 추적 및 디버깅을 통해 문제가 실제로 읽기 페이지 캐시라는 것이 입증되었습니다. 이는 showModalDialog 및 showModelessDialog를 사용하여 asp.net에서 팝업 양식을 만들 때 page_load 이벤트에

코드 복사 코드는 다음과 같습니다.

Response.Expires = 0;
Response.Cache.SetNoStore();
Response.AppendHeader("Pragma", "no-cache");
캐시를 삭제합니다. showModalDialog 메서드를 테스트하려면 asp, php, js, vbscript를 사용하면 캐시를 지울 필요가 없으므로 안심하고 사용할 수 있습니다. showModalDialog에 대해서는 아래에서 찾은 자세한 소개를 참조하세요.
showModalDialog 사용 경험 및 showModelessDialog
1. showModalDialog와 showModelessDialog의 차이점은 무엇입니까?
ShowModalDialog: 열린 후에는 입력 포커스가 항상 유지됩니다. 대화 상자를 닫지 않으면 사용자는 기본 창으로 전환할 수 없습니다. 경보의 작동 효과와 유사합니다.
ShowModelessDialog: 열린 후 사용자는 입력 포커스를 무작위로 전환할 수 있습니다. 메인 창에는 아무런 영향을 주지 않습니다.(최대한동안 차단됩니다. :P)
2. showModalDialog 및 showModelessDialog의 하이퍼링크가 새 창에 표시되는 것을 방지하는 방법은 무엇입니까?
열린 웹페이지에 를 추가하면 됩니다. 이 문장은 일반적으로 과 사이에 배치됩니다.
3. showModalDialog 및 showModelessDialog의 콘텐츠를 새로 고치는 방법은 무엇입니까?
showModalDialog 및 showModelessDialog에서는 F5를 눌러 새로 고침을 할 수 없으며 메뉴가 팝업되지 않습니다. 이는 자바스크립트에만 의존할 수 있습니다. 다음은 관련 코드입니다:
"reload " href="filename.htm" style="display:none">reload...
filename.htm을 웹페이지 이름으로 바꾸고 이를 웹페이지에 넣습니다. 열려면 F5를 누르면 새로 고쳐질 수 있습니다. 이는 와 함께 사용해야 합니다. 그렇지 않으면 F5를 누르면 새 창이 나타납니다.
참고: 접속 시 자동으로 새로고침하고 싶다면, 열린 페이지에서 레코드 변수를 설정하면 모달 창이 열리면 해당 변수가 1로 설정되며, 이후 위의 방법을 사용하여 모달을 새로고침하면 됩니다. window.window가 닫히면 창이 열리면 변수가 0이 됩니다.
4. showModalDialog(또는 showModelessDialog)로 열린 창을 javascript를 사용하여 닫는 방법.
　
　또한 와 협력하세요. 그렇지 않으면 새로운 것이 됩니다. IE 창을 열었다가 닫습니다.
5. showModalDialog 및 showModelessDialog의 데이터 전송 기술.
예:
이제 showModalDialog(또는 showModelessDialog)에서 var_name 변수를 읽거나 설정해야 합니다.
일반 전달 방법:
window.showModalDialog("filename.htm",var_name)
// var_name 변수 전달
showModalDialog(또는 showModelessDialog)에서 읽고 설정할 때:
Alert(window.dialogArguments) // var_name 변수 읽기
window.dialogArguments="oyiboy" // var_name 변수 설정
이 방법도 만족스러운데, var_name을 연산하면서 두 번째 변수인 var_id를 연산하고 싶다면 어떻게 할까요? 더 이상 운영할 수 없습니다. 이것이 이 배송 방법의 한계입니다. showModalDialog(또는 showModelessDialog)를 읽고 설정할 때:
Alert(window.dialogArguments.var_name) //var_name 변수 읽기
window.dialogArguments.var_name ="oyiboy" //var_name 변수 설정
동시에 var_id 변수도 조작할 수 있습니다
　　alert(window.dialogArguments.var_id)//var_id 변수 읽기
　　　Window.dialogArguments.var_id ="001"//var_id 변수 설정
　　　　양식 개체의 요소 등 창의 모든 개체에 대해 작업을 수행합니다.
window.dialogArguments.form1.index1.value="index1 요소의 값을 설정합니다."
팝업 창의 반환 값: window.returnValue = ...
6. showModelessDialog는 상호 운용됩니다.
다음 코드의 주요 기능은 showModelessDialog 내에서 다른 showModelessDialog의 위치를 ​​이동하는 것입니다.
메인 파일의 js 코드 일부.
var s1=showModelessDialog('control.htm',window,"dialogTop:1px;dialogLeft:1px") //제어 창 열기
var s2=showModelessDialog('about:blank',window,"dialogTop : 200px;dialogLeft:300px") //제어된 창 열기
.htm 코드의 일부를 제어합니다.




코드 복사

코드는 다음과 같습니다.

　<script> <br>　　 //윈도우의 위치 데이터가 "xxxpx" 모드이므로 위치 데이터를 동작시키기 위한 특별한 동작 기능이 필요합니다. <br>함수 countNumber(A_strNumber,A_strWhatdo) <br>{ <br>A_strNumber=A_strNumber.replace('px','') <br>A_strNumber-=0 <br>switch(A_strWhatdo) <br>{ <br>case "-":A_strNumber-=10;break; <br>case " ":A_strNumber =10;break; <br>} <br>return A_strNumber "px" <br>} <br>　</script>
　 input type="button" onclick="window.dialogArguments.s2.dialogLeft=countNumber(window.dialogArguments.s2.dialogLeft,'-')" value="왼쪽으로 이동">
　
　

위의 주요 부분은 다음과 같습니다.
창 이름 지정 방법: var s1=showModelessDialog('control.htm',window,"dialogTop:1px;dialogLeft:1px")
변수 액세스 방법: window.dialogArguments.s2.dialogTop
이 예는 showModelessDialog와 showModelessDialog의 차이점일 뿐입니다. 위치 연산 기능은 이 원리를 이용하여 showModelessDialogs, 전송 변수 및 데이터 등 간의 표시 페이지를 서로 제어합니다. 이는 귀하의 성과에 따라 다릅니다.
============================================= === ====================
window.showModalDialog() 메서드는 HTML 콘텐츠를 표시하는 모달 대화 상자를 만드는 데 사용됩니다.
window.showModelessDialog() 메서드는 HTML 콘텐츠를 표시하는 비모달 대화 상자를 만드는 데 사용됩니다.
사용법:
vReturnValue = window.showModalDialog(sURL [, vArguments] [,sFeatures])
vReturnValue = window.showModelessDialog(sURL [, vArguments] [,sFeatures])
매개변수 설명:
sURL--필수 매개변수, 유형: 문자열. 대화 상자에 표시할 문서의 URL을 지정하는 데 사용됩니다.
vArguments--선택적 매개변수, 유형: 변형. 대화 상자에 매개변수를 전달하는 데 사용됩니다. 배열 등을 포함하여 전달되는 매개변수 유형은 제한되지 않습니다. 대화 상자는 window.dialogArguments를 통해 전달된 매개변수를 가져옵니다.
sFeatures--선택적 매개변수, 유형: 문자열. 대화 상자의 모양과 기타 정보를 설명하는 데 사용되며 다음 중 하나 이상을 세미콜론 ";"으로 구분하여 사용할 수 있습니다.
1.dialogHeight: 대화 상자 높이, 100px 이상. IE4의 대화 상자 높이 및 대화 상자 너비의 기본 단위는 em이고 IE5 이상에서는 편의상 모달 대화 상자를 정의할 때 단위를 px로 사용합니다.
2.dialogWidth: 대화상자 너비.
3.dialogLeft: 화면 왼쪽으로부터의 거리입니다.
4.dialogTop: 화면으로부터의 거리.
5.center: {yes | no | 1 | 0}: 창이 중앙에 있는지 여부는 기본값이지만 높이와 너비는 계속 지정할 수 있습니다.
6.help: {yes | no | 0}: 도움말 버튼을 표시할지 여부, 기본값은 yes입니다.
7.ressible: {예 | 아니요 | 0 } [IE5+]: 크기를 조정할 수 있는지 여부입니다. 기본값은 아니오입니다.
8.status: {yes | no 1 | 0} [IE5]: 상태 표시줄을 표시할지 여부입니다. 기본값은 yes[Modal] 또는 no[Modal]입니다.
9.scroll:{ yes | no | 0 | on off }: 대화 상자에 스크롤 막대가 표시되는지 여부를 나타냅니다. 기본값은 예입니다.
다음 속성은 HTA에서 사용되며 일반적으로 일반 웹페이지에서는 사용되지 않습니다.
10.dialogHide:{ yes | no | 1 | 0 | off }: 인쇄 또는 인쇄 미리보기 중에 대화 상자를 숨길지 여부입니다. 기본값은 아니오입니다.
11.edge:{ sunken | raise }: 대화 상자의 테두리 스타일을 지정합니다. 기본값은 증가합니다.
12.unadorned:{ 예 | 아니요 | 0 |