1. กล่องโต้ตอบสามกล่องที่พบบ่อยที่สุดใน JS
// ====================================================================/กล่องโต้ตอบปรากฏขึ้น } // ช่องแบบสอบถามปรากฏขึ้นพร้อมกับการยืนยันและยกเลิกการทำงานของปุ่มปุ่ม () {// ใช้ค่าที่ส่งคืนโดยกล่องโต้ตอบ (จริงหรือเท็จ) ถ้า (ยืนยัน ("คุณแน่ใจว่าจะส่งหรือไม่")) {แจ้งเตือน ("คลิกเพื่อยืนยัน"); } else {Alert ("คลิกเพื่อยกเลิก"); }} // กล่องอินพุตปรากฏขึ้นเข้าสู่ย่อหน้าของข้อความและคุณสามารถส่งฟังก์ชัน prom () {var name = prompt ("โปรดป้อนชื่อของคุณ", ""); // กำหนดเนื้อหาอินพุตให้กับชื่อตัวแปร // ควรสังเกตที่นี่ว่า ProPT มีพารามิเตอร์สองตัว หากพรอมต์เป็นพรอมต์และจากนั้นค่าเริ่มต้นในกล่องโต้ตอบหลังจากกล่องโต้ตอบออกมา//หากเนื้อหาที่ส่งคืนคือ {แจ้งเตือน ("ยินดีต้อนรับ:" + ชื่อ)}}2. กล่องพรอมต์ 6 กล่องและการดำเนินการที่ใช้กันทั่วไปเมื่อคลิกปุ่ม
<! -------------------------> <อินพุต type = "ปุ่ม" name = "btn2" id = "btn2" value = "ลบ" onClick = "return cannaver ('ใช่/ไม่ใช่');); - onclick = "javascript: window.location.href = 'http: //www.baidu.com';"/> - - JavaScript: window.location.reload (); // กลับไปที่หน้าปัจจุบันและรีเฟรช - -3. ป๊อปอัพหน้าต่างอิสระ
// ปิดกล่องโต้ตอบจะปรากฏขึ้นในหน้าต่างหลักและหน้าต่างลูกปิดโดยตรง this.response.write ("<ภาษาสคริปต์ = JavaScript> window.close (); </script>"); // ปิดทั้งหน้าต่างพาเรนต์และหน้าต่างลูกจะปรากฏขึ้นในหน้าต่างหลักปิดโดยตรงนี้ response.write ("<script>"); this.response.write ("{top.opener = null; top.close ();}"); this.response.write ("</script>"); // หน้าต่างยอดนิยมรีเฟรชความกว้างของหน้าปัจจุบัน = 200 ความสูง = 200 เมนู แถบเมนูแถบเครื่องมือแถบที่อยู่แถบสถานะไม่มีสิ่งนี้ response.write ("<ภาษาสคริปต์ = javascript> window.open ('rows.aspx', 'newwindow', 'width = 200, ความสูง = 200') </script>"); // หน้าต่างป๊อปอัพจะรีเฟรชหน้าปัจจุบัน this.response.write ("<ภาษาสคริปต์ = JavaScript> window.open ('rows.aspx') </script>"); this.response.write ("<script> window.open ('webform2.aspx', '_ blank'); </script>"); // หน้าต่างพรอมต์ป๊อปอัพกระโดดไปยังหน้าเว็บฟอร์ฟอร์ม 2.aspx (ในหน้าต่าง IE) this.response.write ("<ภาษาสคริปต์ = JavaScript> การแจ้งเตือน ('ลงทะเบียนสำเร็จ'); window.location.href = 'WebForm2.aspx'; </script>"); // ปิดหน้าต่างลูกปัจจุบันและรีเฟรชหน้าต่างพาเรนต์ this.response.write ("<script> window.opener.location.href = window.opener.location.href; window.close (); </script>"); this.response.write ("<script> window.opener.location.replace (window.opener.document.referrer); window.close (); </script>"); // หน้าต่างลูกรีเฟรชหน้าต่างพาเรนต์ this.response.write ("<script> window.opener.location.href = window.opener.location.href = 'webform1.aspx'; </script>"); // หน้าต่างลูกรีเฟรชหน้าต่างพาเรนต์ this.response.write ("<script> window.opener.location.href = 'webform1.aspx'; </script>"); // หน้าต่างเด็กปรากฏขึ้น หลังจากการยืนยันหน้าต่างลูกจะปรากฏขึ้น (webform2.aspx) this.response.write ("<ภาษาสคริปต์ = 'javascript'> การแจ้งเตือน ('โพสต์สำเร็จ!'); window.open ('webform2.aspx') </script>"); // หน้าต่างพรอมต์จะปรากฏขึ้นและหลังจากการยืนยันให้รีเฟรชหน้าต่างพาเรนต์ this.response.write ("<script> การแจ้งเตือน ('โพสต์สำเร็จ!'); window.opener.location.href = window.opener.location.href; </script>"); // หน้าเดียวกันปรากฏขึ้น <อินพุต type = "ปุ่ม" value = "ปุ่ม" onclick = "javaScript: window.open (window.location.href)"> // response.write ("parent.mainframebottom.location.href = 'yourwebform.aspx? temp =" +str +" <script language = "javascript"> <!-window.open ('page.html', 'newwindow', 'ความสูง = 100, ความกว้าง = 400, ด้านบน = 0, ซ้าย = 0, แถบเครื่องมือ = ไม่, menubar = ไม่, scrollbars = ไม่พารามิเตอร์คำอธิบาย:
window.open คำสั่งเพื่อปรากฏขึ้นหน้าต่างใหม่;
ชื่อไฟล์ 'page.html' ของหน้าต่างป๊อปอัพ;
'Newwindow' ชื่อของหน้าต่างป๊อปอัพ (ไม่ใช่ชื่อไฟล์) หากไม่จำเป็นสามารถแทนที่ได้ด้วยว่างเปล่า '';
ความสูง = 100 ความสูงของหน้าต่าง;
ความกว้าง = 400 ความกว้างของหน้าต่าง;
top = 0 ค่าพิกเซลของหน้าต่างจากด้านบนของหน้าจอ;
ซ้าย = 0 ค่าพิกเซลของหน้าต่างทางด้านซ้ายของหน้าจอ;
Toolbar = ไม่ว่าจะแสดงแถบเครื่องมือใช่คือการแสดงผล
Menubar, Scrollbars หมายถึงแถบเมนูและแถบเลื่อน
resizable = ไม่ว่าจะอนุญาตให้เปลี่ยนขนาดหน้าต่างได้หรือไม่
ตำแหน่ง = ไม่ว่าจะแสดงแถบที่อยู่ใช่ไหม
สถานะ = ไม่ว่าจะแสดงข้อมูลในแถบสถานะ (โดยปกติแล้วไฟล์เปิดอยู่แล้ว) ใช่ได้รับอนุญาต;
'Newwin': ซ่อนแถบที่อยู่แถบแถบเมนู
4. การสาธิตตัวอย่างหน้าต่างป๊อปอัพ
// 1. หน้าต่างรหัสหน้าต่างป๊อปอัพขั้นพื้นฐานที่สุด OPEN ('page.html') // 2 หน้าต่างป๊อปอัพหลังจากการตั้งค่าหน้าต่างเปิด ('page.html', 'newWindow', 'ความสูง = 100, ความกว้าง = 400, ด้านบน = 0, ซ้าย = 0, แถบเครื่องมือ = ไม่, menubar = ไม่, scrollbars = ไม่, resizable = no, ตำแหน่ง = ไม่, สถานะ = ไม่' //'page.html 'ชื่อไฟล์ของหน้าต่างป๊อปอัพ; // 'Newwindow' ชื่อของหน้าต่างป๊อปอัพ (ไม่ใช่ชื่อไฟล์) หากไม่จำเป็นคุณสามารถใช้ว่าง '' แทน; // ความสูง = 100 ความสูงของหน้าต่าง; // width = 400 ความกว้างของหน้าต่าง; // top = 0 พิกเซลค่าของหน้าต่างจากด้านบนของหน้าจอ; // left = 0 พิกเซลค่าของหน้าต่างจากด้านซ้ายของหน้าจอ; // toolbar = ไม่ว่าจะแสดงแถบเครื่องมือใช่คือจอแสดงผล; // Menubar, Scrollbars แสดงถึงแถบเมนูและแถบเลื่อน // resizable = ไม่อนุญาตให้เปลี่ยนขนาดหน้าต่างใช่ได้รับอนุญาต; // location = ไม่ว่าจะแสดงแถบที่อยู่ใช่ได้รับอนุญาต; // status = ไม่ว่าจะแสดงข้อมูลในแถบสถานะ (โดยปกติแล้วไฟล์จะเปิด), ใช่ได้รับอนุญาต; // 3. ใช้ฟังก์ชั่นเพื่อควบคุมฟังก์ชั่นหน้าต่างป๊อปอัพ openwin () {window.open ("page.html", "newwindow", "ความสูง = 100, ความกว้าง = 400, แถบเครื่องมือ = ไม่, menubar = ไม่, scrollbars = ไม่, resizable = no, ตำแหน่ง = ไม่, สถานะ = ไม่") // // ฟังก์ชั่น openwin () ถูกกำหนดไว้ที่นี่และเนื้อหาของฟังก์ชั่นคือการเปิดหน้าต่าง ไม่มีการใช้งานจนกว่าจะมีการเรียก เรียกมันว่าอย่างไร? // วิธีที่ 1: <body onload = "openwin ()"> หน้าต่างป๊อปอัพคือเมื่อเบราว์เซอร์อ่านหน้า; // วิธีที่ 2: <body onunload = "openwin ()"> หน้าต่างป๊อปอัพคือเมื่อเบราว์เซอร์ออกจากหน้า; // วิธีที่ 3: โทรด้วยการเชื่อมต่อ: // <a href = "#" onclick = "openwin ()"> เปิดหน้าต่าง </a> // note: "#" ที่ใช้เป็นการเชื่อมต่อเสมือนจริง // วิธีที่ 4: โทรด้วยปุ่มเดียว: // <อินพุต type = "ปุ่ม" onclick = "openwin ()" value = "openwin ()"> // 4, 2 windows ปรากฏขึ้นในเวลาเดียวกันฟังก์ชั่น OpenWin () {window.Open ("page.html", "newWindow", "ความสูง = 100 resizable = no, location = no, status = no ") // เขียนลงในหน้าต่างบรรทัด open (" page2.html "," newWindow2 "," ความสูง = 100, ความกว้าง = 100, ด้านบน = 1 00, ซ้าย = 100, toolbar = no, menubar = no, scrollbars = ไม่ หน้าต่างสองบานที่ปรากฏขึ้นใช้ด้านบนและด้านซ้ายเพื่อควบคุมตำแหน่งป๊อปอัพและอย่าเขียนทับกัน ในที่สุดใช้สี่วิธีที่กล่าวถึงข้างต้นเพื่อเรียกมัน // หมายเหตุ: ชื่อ (Newwindows และ NewWindow2) ของหน้าต่างทั้งสองไม่ควรเหมือนกันหรือว่างเปล่า // 5. เปิดไฟล์ 1.htm ในหน้าต่างหลักและหน้าต่างเล็ก ๆ จะปรากฏขึ้น page.html ฟังก์ชั่น openwin () {window.open ("page.html", "", "width = 200, ความสูง = 200")} // โทร: <a href = "1.htm" onclick = "openwin () การควบคุมการปิดที่กำหนดเวลาของหน้าต่างป๊อปอัพ // ต่ำเราจะทำการควบคุมบางอย่างในหน้าต่างป๊อปอัพและเอฟเฟกต์จะดีกว่า หากเราเพิ่มรหัสชิ้นเล็ก ๆ ลงในหน้าป๊อปอัพ (โปรดทราบว่ามันถูกเพิ่มลงใน HTML ของ page.html ไม่ใช่หน้าหลัก) มันจะไม่เย็นกว่านี้หรือไม่ที่จะปิดโดยอัตโนมัติหลังจาก 10 วินาที? // ก่อนอื่นเพิ่มรหัสต่อไปนี้ในพื้นที่ <head> ของไฟล์ page.html: function clositit () {settimeout ("self.close ()", 10,000) // ms} // การโหลดหน้าเสร็จสมบูรณ์และเรียกเหตุการณ์ปิด $ (เอกสาร) // 7. เพิ่มปุ่มปิดลงในหน้าต่างป๊อปอัพ // <อินพุต type = 'ปุ่ม' value = 'close' onclick = 'window.close ()'> // 8 รวมหน้าต่างป๊อปอัพ-หนึ่งหน้าและสอง windows // ตัวอย่างด้านบนมีสองหน้าต่างหนึ่งหน้าต่างคือหน้าต่างหลักและอีกหน้าต่างหนึ่งคือหน้าต่างป๊อปอัพ ด้วยตัวอย่างต่อไปนี้คุณสามารถกรอกเอฟเฟกต์ข้างต้นในหน้า ฟังก์ชั่น openwin () {openwindow = window.open ("", "newwin", "ความสูง = 250, ความกว้าง = 250, แถบเครื่องมือ = ไม่, scrollbars =" + scroll + ", menubar = no"); // เขียนเป็นบรรทัด openwindow.document.write ("<title> ตัวอย่าง </title>") openwindow.document.write ("<body bgcolor =#ffffff>") openwindow.document.write ("<h1> hello! openwindow.document.write ("</body>") openwindow.document.write ("</html>") openwindow.document.close ()} // <a href = "#" onclick = "OpenWin ()"> เปิดหน้าต่าง </a> // <อินพุต // 9. Ultimate Application-Popular Window's Control // จำได้ว่าถึงแม้ว่าหน้าต่างป๊อปอัพด้านบนจะเย็น แต่ก็มีปัญหาเล็กน้อย ตัวอย่างเช่นหากคุณวางสคริปต์ด้านบนในหน้าเว็บที่ต้องผ่านบ่อยครั้ง (เช่นหน้าแรก) จากนั้นทุกครั้งที่คุณรีเฟรชหน้านี้หน้าต่างจะปรากฏขึ้นหนึ่งครั้งและเราใช้คุกกี้เพื่อควบคุม // ก่อนอื่นเพิ่มรหัสต่อไปนี้ในพื้นที่ <head> ของหน้าหลัก html: ฟังก์ชั่น openwin () {window.open ("page.html", "", "width = 200, ความสูง = 200")} ฟังก์ชั่น get_cookie (ชื่อ) if (document.cookie.length> 0) {Offset = document.cookie.indexof (ค้นหา) ถ้า (ออฟเซ็ต! = -1) {ออฟเซ็ต += search.length end = document.cookie.indexof (";", ออฟเซ็ต); if (end == -1) end = document.cookie.length; returnValue = unescape (document.cookie.substring (ออฟเซ็ตสิ้นสุด))}} returnValue; } function loadpopup () {ถ้า (get_cookie ('popped') == '') {openwin () document.cookie = "popped = ใช่"}} // จากนั้นแทนที่ <body> sentence ในหน้าหลัก อย่าปรากฏขึ้นอีกครั้ง ป๊อป-เดียวอย่างเดียว!บทสรุปข้างต้นของวิธีการใช้งานของกล่องป๊อปอัพ JS กล่องโต้ตอบกล่องพรอมต์และหน้าต่างป๊อปอัพ (แนะนำ) เป็นเนื้อหาทั้งหมดที่ฉันแบ่งปันกับคุณ ฉันหวังว่าคุณจะให้ข้อมูลอ้างอิงและฉันหวังว่าคุณจะสนับสนุน wulin.com มากขึ้น