1. JS에서 3 개의 가장 일반적인 대화 상자
// ==============================================================/대화 상자가 팝업되고 출력을 출력합니다. } // 확인 및 취소 버튼 기능을 사용하여 쿼리 상자가 팝업됩니다 () {// 대화 상자에 의해 반환 된 값 (true 또는 false) if (확인 ( "제출해야합니까?")) {alert ( "확인을 위해 클릭하면"); } else {alert ( "클릭으로 클릭하여"); }} // 입력 상자가 팝업되어 텍스트 단락을 입력하면 function prom () {var name = prompt ( "이름을 입력하십시오", "")를 제출할 수 있습니다. // 입력 컨텐츠를 변수 이름에 할당하십시오. // 여기서 Propt에 두 개의 매개 변수가 있음을 알 수 있습니다. 프롬프트가 프롬프트이고 대화 상자 후 대화 상자의 기본값이 나오면 {alert ( "환영 :" + name)}}2. 버튼을 클릭 할 때 일반적으로 사용되는 6 개의 프롬프트 상자 및 작업
<! --------------------------> <입력 유형 = "버튼"이름 = "btn2"id = "btn2"value = "delete"onclick = "return 확인 ( 'yes/no');); <!----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- onclick = "javaScript : window.location.href = 'http : //www.baidu.com';"/> <!--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- javaScript : window.location.reload (); // 현재 페이지로 돌아가 새로 고침 <!------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
3. 독립 창을 팝업하십시오
// 닫으면 대화 상자가 상위 창에서 팝업되고 자식 창이 직접 닫습니다. // 닫기, 부모 창이나 자식 창이 부모 창에 나타나지 않고 직접 닫습니다. response.write ( "<cript>"); this.response.write ( "{top.opener = null; top.close ();}"); this.response.write ( "</script>"); // 인기있는 창은 현재 페이지 너비 = 200 높이 = 200 메뉴를 새로 고칩니다. 메뉴 표시 줄, 도구 모음, 주소 표시 줄, 상태 표시 줄에는 is.response.write가 없습니다 ( "<script language = javaScript> wind // 팝업 창이 현재 페이지를 새로 고칩니다. this.response.write ( "<cript> wind // 팝업 프롬프트 창이 webform2.aspx 페이지로 점프합니다. // 현재 자식 창을 닫고 부모 창을 새로 고침 this.response.write ( "<cript> window.opener.location.href = wind this.response.write ( "<script> window.opener.location.replace (wind // Child Window는 부모 창을 새로 고침합니다. // Child Window는 부모 창을 새로 고침합니다. // 자식 창이 팝업됩니다. 확인 후 Child Window가 팝업됩니다 (WebForm2.aspx) this.response.write ( "<Script Language = 'JavaScript'> Alert ( 'success trooms!'); window.open ( 'webform2.aspx') </script>"); // 프롬프트 창이 팝업되고 확인 후 부모 창을 새로 고쳐서 this.response.write ( "<cript> alert ( 'successly!'); window.opener.location.href = window.opener.location.href; </script>"); // 같은 페이지가 팝업 <입력 유형 = "버튼"value = "button"onclick = "javaScript : window.open (wind <script language = "javaScript"> <!-Window.Open ( 'page.html', 'newwindow', 'newwindow', 'height = 100, width = 400, top = 0, left = 0, thool = 0, thool = 0, thool = 0, menubar = no, scrollbars = no, Resizable = no, location = no, status = no') //이 문장이 한 줄로 작성되어야합니다.매개 변수 설명 :
Window.open 명령을 팝업하라는 새 창을 나타냅니다.
팝업 창의 'page.html'파일 이름;
'NewWindow'팝업 창의 이름 (파일 이름이 아님)이 필요하지 않은 경우 비어있는 것으로 대체 할 수 있습니다. '';
높이 = 100 창 높이;
너비 = 400 창 너비;
상단 = 0 화면 상단에서 창의 픽셀 값;
왼쪽 = 0 화면 왼쪽에있는 창의 픽셀 값;
도구 모음 = 아니요 도구 모음을 표시할지 여부는 디스플레이입니다.
Menubar, 스크롤 바는 메뉴 막대와 스크롤 바를 의미합니다.
RESIZABLE = 아니요 창 크기를 변경할 수 있는지 여부는 그렇습니다.
위치 = 아니요 주소 표시 줄을 표시할지 여부는 허용됩니다.
상태 = 아니오 상태 표시 줄에 정보를 표시할지 여부 (일반적으로 파일이 이미 열려 있음), 예가 허용됩니다.
'Newwin': 숨기기 메뉴 바 주소 바 도구 모음을 숨 깁니다
4. 팝업 창 예제 데모
// 1. 가장 기본적인 팝업 창 코드 Window.open ( 'page.html') // 2. 팝업 창을 설정 한 후 팝업 창 ( 'page.html', 'newwindow', 'height = 100, width = 400, top = 0, 왼쪽 = 0, 툴바 = 아니오, menubar = 아니오, 스크롤 바 = 아니오, Resizable = no, 위치 = 아니오, 상태 = 아니오') // 한 줄에 작성되어야합니다. //'page.html '팝업 창의 파일 이름; // 'NewWindow'팝업 창의 이름 (파일 이름이 아님)이 필요하지 않은 경우 대신 비어있을 수 있습니다. // 높이 = 100 창 높이; // 너비 = 400 창 너비; // 화면 상단에서 창의 픽셀 값; // 왼쪽 = 0 화면 왼쪽에서 창의 픽셀 값; // 툴바 = 아니요 도구 모음을 표시할지 여부는 디스플레이입니다. // menubar, 스크롤 바는 메뉴 막대와 스크롤 바를 나타냅니다. // RESIZIZALE = 아니요 창 크기를 변경할 수 있는지 여부는 예가 허용됩니다. // location = 아니요 주소 표시 줄을 표시할지 여부는 허용됩니다. // status = 아니요 상태 표시 줄에 정보를 표시할지 여부 (일반적으로 파일이 열렸습니다), 예가 허용됩니다. // 3. 팝업 창 함수 OpenWin () {window.open ( "page.html", "newwindow", "height = 100, width = 400, 툴바 = 아니오, menubar = 아니오, 스크롤 바 = 아니오, Resizable = no, location = no, status = no") // (문서) (recread) (recepn, recled); // 함수 OpenWin ()이 여기에 정의되어 있으며 함수 내용은 창을 열는 것입니다. 호출 될 때까지 사용하지 않습니다. 그것을 부르는 방법? // 메소드 1 : <body onload = "OpenWin ()"> 팝업 창은 브라우저가 페이지를 읽을 때입니다. // 메소드 2 : <Body OnUnload = "OpenWin ()"> 팝업 창은 브라우저가 페이지를 떠날 때입니다. // 메소드 3 : 연결과 함께 호출 : // <a href = "#"onclick = "OpenWin ()"> 창 열기 </a> // 참고 : 사용 된 "#"는 가상 연결입니다. // 메소드 4 : 하나의 단추로 호출 : // <input type = "button"onclick = "OpenWin ()"value = "OpenWin ()"> // 4, 2 Windows는 동시에 동시에 OpenWin () {Window.open ( "page.html", "newWindow", "NewWindow", "100, width = 100, 왼쪽 = 0, 메신저 = no, menubar = no, menubar = 0, scrollbars = no, Resizedable = no, location = no, status = no ") // 선 창에 씁니다. // 팝업 된 두 개의 창을 덮지 않으려면 상단과 왼쪽을 사용하여 팝업 위치를 제어하고 서로 덮어 쓰지 마십시오. 마지막으로 위에서 언급 한 네 가지 방법을 사용하여 호출하십시오. // 참고 : 두 창의 이름 (NewWindows 및 NewWindow2)은 동일하지 않거나 단순히 비어 있어야합니다. // 5. 메인 창에서 1.htm을 열면 작은 창이 page.html function openwin () {wind 팝업 윈도우의 시간이 지정된 닫는 컨트롤 // 낮음은 팝업 창에서 약간의 제어를 수행하며 효과가 더 좋습니다. 팝업 페이지에 작은 코드를 추가하면 (메인 페이지가 아닌 Page.html의 HTML에 추가) 10 초 후에 자동으로 닫게하는 것이 더 시원하지 않습니까? // 먼저, page.html 파일의 <head> 영역에 다음 코드를 추가하십시오 : function close () {settimeout ( "self.close ()", 10000) // ms} // 페이지로드가 완료되고 Close 이벤트를 호출합니다. // 7. 팝업 창에 닫기 버튼을 추가 // <입력 유형 = '버튼'값 = '닫기'onclick = 'window.close ()'> // 8. 팝업 창 포함-한 페이지와 두 개의 창문 // 위의 예에는 두 개의 창이 포함되어 있으며, 하나는 기본 창이고 다른 하나는 팝업 창입니다. 다음 예제를 사용하면 위의 효과를 페이지에서 완료 할 수 있습니다. function OpenWin () {OpenWindow = Window.open ( "", "newwin", "height = 250, 너비 = 250, 도구 모음 = 아니오, scrollbars =" + scroll + ", menubar = no"); // OpenWindow.document.write ( "<title> example </title>") OpenWindow.document.write ( "<body bgcolor =#ffffff>") OpenWindow.document.write ( "<h1> hello! </h1>") OpenWindow.document.write ( "New Window Opened!") OpenWindow.document.write ( "</body>") OpenWindow.document.write ( "</html>") OpenWindow.document.close ()} // <a href = "#"onclick = "OpenWin ()"> 개방형 </a> // <input type = "valling" "onclic =" // 9. Ultimate Application-Popular Window의 쿠키 컨트롤 // 위의 팝업 창이 시원하지만 약간의 문제가 있음을 상기하십시오. 예를 들어, 위의 스크립트를 자주 전달 해야하는 페이지에 (예 : 홈페이지)를 배치하면이 페이지를 새로 고칠 때마다 창이 한 번 나타나고 쿠키를 사용하여 제어합니다. // 먼저 메인 페이지의 <head> 영역에 다음 코드를 추가하십시오. html : function OpenWin () {wind if (document. if (end == -1) end = document.cookie.length; returnValue = unescape (document.cookie.substring (Offset, End))}} return returnValue; } function loadPopup () {if (get_cookie ( 'popped') == ') {OpenWin () document.cookie = "popped = yes"}} // 다음 메인 페이지의 원본 <body> 문장을 <body onload = "로드 팝업 ()" "로 바꾸십시오. 다시. 진짜 팝 전용 온스!JS 팝업 박스, 대화 상자, 프롬프트 상자 및 팝업 Windows (권장)의 구현 방법에 대한 위의 요약은 내가 공유하는 모든 내용입니다. 나는 당신이 당신에게 참조를 줄 수 있기를 바랍니다. 그리고 당신이 wulin.com을 더 지원할 수 있기를 바랍니다.