ฉันคิดว่าพวกคุณส่วนใหญ่รู้วิธีใช้เว็บเพจเพื่อปรากฏขึ้นใน Windows ในรูปแบบต่าง ๆ แต่มาเรียนรู้เกี่ยวกับวิธีการสร้างหน้าต่างป๊อปอัพที่หลากหลายในวันนี้:
1. เปิดหน้าต่างเต็มหน้าจอ
รหัสมีดังนี้:
<html> <body //www.vevb.com ',' wulin.com ',' fullscreen '); ">; <b> www.vevb.com </b> </body> </html>
2. เปิดหน้าต่างที่ถูกเปลี่ยนโดย F11
รหัสมีดังนี้:
<html> <body '//www.vevb.com', 'wulin.com', 'channelmode'); ">; <b> www.vevb.com </b> </body> </html>
3. เปิดหน้าต่างด้วยแถบเครื่องมือลิงค์ที่ชื่นชอบ
รหัสมีดังนี้:
<html> <body www.wangye8.com ',' wulin.com ',' width = 400, ความสูง = 300, ไดเรกทอรี '); "> <b> www.wangye8.com </b> </body> </html>
4. กล่องโต้ตอบหน้าเว็บ
รหัสมีดังนี้:
<html> <script language = "javascript"> <!-showmodaldialog ('// www.vevb.com,' wulin.com ',' dialogwidth: 400px; dialogheight: 300px; dialogleft: 200px; <b> www.wangye8.com </b> </body> </html> <html> <script Language = "JavaScript"> <!- showmodelessDialog ('// www.vevb.com,' wulin.com ',' dialogwidth: 400px; dialogheight: 300px; dialogleft: 200px; dialogtop: 150px; center: ใช่; <b> http://www.wangye8.com </b> </body> </html>showmodaldialog () หรือ showmodelessDialog () เรียกกล่องโต้ตอบเว็บ สำหรับความแตกต่างระหว่าง showmodaldialog () และ showmodelessDialog () มันคือหน้าต่างที่เปิดโดย showmodaldialog () (เรียกว่าหน้าต่างโหมด) วางอยู่บนหน้าต่างหลักและต้องปิดเพื่อเข้าถึงหน้าต่างหลัก ShowModelessDialog ()
Dialogheight: Iheight ตั้งค่าความสูงของหน้าต่างโต้ตอบ
Dialogwidth: iwidth ตั้งค่าความกว้างของหน้าต่างโต้ตอบ
Dialogleft: IXPOS ตั้งค่าตำแหน่งซ้ายของหน้าต่างโต้ตอบเทียบกับมุมซ้ายบนของเดสก์ท็อป
Dialogtop: IYPOS ตั้งตำแหน่งด้านบนของหน้าต่างโต้ตอบเทียบกับมุมซ้ายบนของเดสก์ท็อป
ศูนย์: {ใช่ | ไม่ | 1 | 0} ระบุว่าจะเน้นกล่องโต้ตอบบนเดสก์ท็อปค่าเริ่มต้นคือ "ใช่" หรือไม่
ช่วย: {ใช่ | ไม่ | 1 | 0} ระบุว่าไอคอนความช่วยเหลือที่ไวต่อบริบทจะแสดงในหน้าต่างโต้ตอบหรือไม่ ค่าเริ่มต้นคือ "ใช่"
resizable: {ใช่ | ไม่ | 1 | 0} ระบุว่าขนาดหน้าต่างโต้ตอบเป็นตัวแปรหรือไม่ ค่าเริ่มต้นคือ "ไม่"
สถานะ: {ใช่ | ไม่ | 1 | 0} ระบุว่าแถบสถานะจะแสดงในหน้าต่างโต้ตอบหรือไม่ สำหรับ Windows ที่ไม่ใช่โหมด Windows ค่าเริ่มต้นคือ "ใช่"; สำหรับ Windows Mode Windows ค่าเริ่มต้นคือ "ไม่"
5. รหัสหน้าต่างป๊อปอัพอื่น ๆ
เพื่อนที่มักท่องอินเทอร์เน็ตอาจเคยเยี่ยมชมเว็บไซต์ดังกล่าว เมื่อพวกเขาเข้าสู่โฮมเพจหน้าต่างจะปรากฏขึ้นทันทีหรือกดลิงค์หรือปุ่มเพื่อปรากฏขึ้น โดยปกติแล้วข้อควรระวังข้อมูลลิขสิทธิ์คำเตือนการต้อนรับ ฯลฯ หรือข้อมูลที่ผู้เขียนต้องการให้พรอมต์พิเศษ ในความเป็นจริงมันง่ายมากที่จะสร้างหน้าดังกล่าว เพียงเพิ่มรหัสสคริปต์ Java สองสามตัวลงใน HTML ของหน้า ต่อไปฉันจะพาคุณไปวิเคราะห์ความลึกลับ
【รหัสหน้าต่างป๊อปอัพขั้นพื้นฐานที่สุด】
อันที่จริงแล้วรหัสนั้นง่ายมาก:
รหัสมีดังนี้:
<script language = "java script"> <!-window.open ('page.html')-> </script>เนื่องจากนี่เป็นส่วนหนึ่งของรหัสสคริปต์ Java พวกเขาควรวางไว้ระหว่างแท็ก <ภาษาสคริปต์ = "สคริปต์ java"> แท็กและ </script> <!-และ-> มีประโยชน์สำหรับเบราว์เซอร์บางรุ่นที่มีรุ่นต่ำกว่า หากไม่รองรับสคริปต์ Java ในเบราว์เซอร์เก่าเหล่านี้รหัสในแท็กจะไม่แสดงเป็นข้อความ
window.open ('page.html') ใช้เพื่อควบคุมป๊อปอัพของหน้าหน้าต่างใหม่ html หาก page.html ไม่ได้อยู่ในเส้นทางเดียวกับหน้าต่างหลักเส้นทางควรเขียนด้านหน้าทั้งเส้นทางสัมบูรณ์ (http: //) และเส้นทางสัมพัทธ์ (../) ก็โอเค
มันโอเคที่จะใช้คำพูดเดี่ยวและสองเท่า แต่อย่าผสม
รหัสชิ้นนี้สามารถเพิ่มลงในตำแหน่งใด ๆ ของ HTML และสามารถเพิ่มได้ระหว่าง <head> และ </head> ยิ่งตำแหน่งที่สูงขึ้นการดำเนินการก่อนหน้านี้โดยเฉพาะอย่างยิ่งเมื่อรหัสหน้ายาวขึ้นลองนำไปข้างหน้าหากคุณต้องการให้หน้าปรากฏขึ้นก่อน
【หน้าต่างป๊อปอัพหลังการตั้งค่า】
มาพูดคุยเกี่ยวกับการตั้งค่าการปรากฏตัวของหน้าต่างป๊อปอัพ เพียงเพิ่มอีกเล็กน้อยในรหัสด้านบน
มาปรับแต่งรูปลักษณ์ขนาดและตำแหน่งป๊อปอัพของหน้าต่างป๊อปอัพนี้เพื่อให้เหมาะกับสถานการณ์เฉพาะของหน้า
รหัสมีดังนี้:
<script language = "java script:> <!-window.open ('page.html', 'newWindow', 'ความสูง = 100, ความกว้าง = 400, top = 0, ซ้าย = 0, แถบเครื่องมือ = ไม่, menubar = ไม่, scrollbars = ไม่, resizable = ไม่, ตำแหน่ง = ไม่, สถานะ = ไม่'พารามิเตอร์คำอธิบาย:
<ภาษาสคริปต์ = "สคริปต์ java"> สคริปต์ JS เริ่มต้น;
window.open คำสั่งเพื่อปรากฏขึ้นหน้าต่างใหม่;
page.html ชื่อไฟล์ของหน้าต่างใหม่ปรากฏขึ้น
ชื่อของหน้าต่างป๊อปอัพ Newwindow (ไม่ใช่ชื่อไฟล์) ซึ่งสามารถแทนที่ได้ด้วยว่างเปล่า ";
ความสูง = 100 ความสูงของหน้าต่าง;
top = 0 ค่าพิกเซลของหน้าต่างจากด้านบนของหน้าจอ;
ซ้าย = 0 ค่าพิกเซลของหน้าต่างจากด้านซ้ายของหน้าจอ;
Toolbar = ไม่ว่าจะแสดงแถบเครื่องมือใช่คือการแสดงผล
Menubar, Scrollbars หมายถึงแถบเมนูและแถบเลื่อน;
resizable = ไม่ว่าจะอนุญาตให้เปลี่ยนขนาดหน้าต่างได้หรือไม่
ตำแหน่ง = ไม่ว่าจะแสดงแถบที่อยู่ใช่ไหม
สถานะ = ไม่ว่าจะแสดงข้อมูลในแถบสถานะ (โดยปกติแล้วไฟล์เปิดอยู่แล้ว) ใช่ได้รับอนุญาต;
</script> สคริปต์ JS สิ้นสุดลง
【ใช้ฟังก์ชั่นเพื่อควบคุม windows ป๊อปอัพ】
นี่คือรหัสที่สมบูรณ์
รหัสมีดังนี้:
<html> <head> <script language = "java script"> <!-ฟังก์ชั่น openwin () {window.open ("page.html", "newwindow", "ความสูง = 100, ความกว้าง = 400, toolbar = no, menubar = no, scrollbars = ไม่ > ... เนื้อหาหน้าเว็บโดยพลการ ... </body> </html>นี่คือฟังก์ชั่น OpenWin () ที่กำหนดไว้และเนื้อหาของฟังก์ชั่นคือการเปิดหน้าต่าง ไม่มีการใช้งานจนกว่าจะมีการเรียก เรียกมันว่าอย่างไร?
วิธีที่ 1: <body> หน้าต่างป๊อปอัพจะปรากฏขึ้นเมื่อเบราว์เซอร์อ่านหน้า;
วิธีที่ 2: <body> หน้าต่างป๊อปอัพจะปรากฏขึ้นเมื่อเบราว์เซอร์ออกจากหน้า;
วิธีที่ 3: โทรด้วยการเชื่อมต่อ: <a href = "#"> เปิดหน้าต่าง </a>
หมายเหตุ: "#" ที่ใช้เป็นการเชื่อมต่อเสมือนจริง
วิธีที่ 4: โทรด้วยปุ่ม: <input type = "button" value = "Open Window">
[ไฟล์ 1.htm ถูกเปิดในหน้าต่างหลักและหน้าหน้าต่างเล็ก ๆ html ปรากฏขึ้นในเวลาเดียวกัน]
เพิ่มรหัสต่อไปนี้ไปยังพื้นที่ <head> หน้าต่างหลัก:
รหัสมีดังนี้:
<script language = "java script"> <!-ฟังก์ชั่น openwin () {window.open ("page.html", "", "width = 200, ความสูง = 200";)} //-> </script>เพียงเพิ่มพื้นที่ <body>: <a href = "1.htm"> เปิด </a>
【ควบคุมการควบคุมเวลาควบคุมเวลาสำหรับหน้าต่างป๊อปอัพ】
มาควบคุมหน้าต่างป๊อปอัปและเอฟเฟกต์จะดียิ่งขึ้น หากเราเพิ่มรหัสชิ้นเล็ก ๆ ลงในหน้าป๊อปอัพ (โปรดทราบว่ามันถูกเพิ่มลงใน HTML ของ Page.html ไม่ใช่หน้าหลักมิฉะนั้น ... ) มันจะไม่เย็นกว่านี้หรือไม่ที่จะปิดโดยอัตโนมัติหลังจาก 10 วินาที?
ก่อนอื่นให้เพิ่มรหัสต่อไปนี้ในพื้นที่ <head> ของไฟล์ page.html:
รหัสมีดังนี้:
<script language = "java script"> function clositit () {settimeout ("self.close ()", 10,000) // ms} </script>จากนั้นใช้ประโยค <body> แทนประโยคดั้งเดิม <body> ใน page.html (อย่าลืมเขียนประโยคนี้! จุดประสงค์ของประโยคนี้คือเรียกรหัสที่ปิดหน้าต่างและปิดหน้าต่างด้วยตัวเองหลังจาก 10 วินาที)
【เพิ่มปุ่มปิดในหน้าต่างป๊อปอัพ】
รหัสมีดังนี้:
<form>
<input type = 'button' value = 'close'
</form>
ฮ่าฮ่าตอนนี้มันสมบูรณ์แบบมากขึ้น!
[หน้าต่าง popt -up รวมอยู่ - สองหน้าต่างต่อหน้า]
ตัวอย่างข้างต้นทั้งหมดมีสองหน้าต่างหนึ่งหน้าต่างเป็นหน้าต่างหลักและอีกหน้าต่างหนึ่งคือหน้าต่างป๊อปอัพ
ด้วยตัวอย่างต่อไปนี้คุณสามารถกรอกเอฟเฟกต์ข้างต้นในหน้า
รหัสมีดังนี้:
<html> <head> <script language = "java script"> function openwin () {openwindow = window.open ("", "newwin", "ความสูง = 250, ความกว้าง = 250, toolbar = ไม่, scrollbars ="+scroll+", menubar = no";);); // เขียนมันเป็นบรรทัด openwindow.document.write ("<title> ตัวอย่าง </title>";) openwindow.document.write ("<body bgcolor =#fffff>";) openwindow.document.write ("<h1> สวัสดี! openwindow.document.write ("</body>";) openwindow.document.write ("</html>";) openwindow.document.close ()} </script> </head> <body> <a href = "#"> เปิดหน้าต่าง </a>มาดูกันว่ารหัสใน openwindow.document.write () ไม่ใช่ HTML มาตรฐานหรือไม่? เพียงแค่เขียนบรรทัดเพิ่มเติมในรูปแบบ ระวังว่าหากมีป้ายกำกับอีกหนึ่งป้ายหรือหนึ่งฉลากน้อยกว่าจะทำให้เกิดข้อผิดพลาด อย่าลืมจบลงด้วย openwindow.document.close ()
【แอปพลิเคชั่นที่ดีที่สุด - การควบคุมคุกกี้ในหน้าต่างป๊อปอัพ】
จำได้ว่าถึงแม้ว่าหน้าต่างป๊อปอัพด้านบนจะเย็น แต่ก็มีปัญหาเล็กน้อย (คุณกำลังดื่มด่ำกับความสุข แต่คุณต้องไม่พบใช่มั้ย) ตัวอย่างเช่นถ้าคุณใส่สคริปต์ไว้ข้างบนในหน้าเว็บที่ต้องผ่านบ่อย (เช่นหน้าแรก) จากนั้นทุกครั้งที่คุณรีเฟรชหน้านี้ มันไม่น่ารำคาญมากเหรอ? มีทางออกหรือไม่? ใช่! ติดตามฉัน เราแค่ต้องใช้คุกกี้เพื่อควบคุมมัน
ก่อนอื่นให้เพิ่มรหัสต่อไปนี้ในพื้นที่ <head> ของหน้าหลัก HTML:
รหัสมีดังนี้:
<script> ฟังก์ชั่น OpenPopup () {window.open ("hello.htm", "", "width = 300, ความสูง = 300") // แก้ไขหน้าต่างป๊อปอัพด้วยตัวคุณเอง} ฟังก์ชั่น get_cookie (ชื่อ) {var search = name + "=" var returnValue = ""; if (documents.cookie.length> 0) {Offset = documents.cookie.indexof (ค้นหา) ถ้า (ออฟเซ็ต! = -1) {// ถ้าคุกกี้มีออฟเซ็ต += search.length // ตั้งค่าดัชนีเริ่มต้นของค่า end = documents.cookie.indexof (";" // ตั้งค่าดัชนีสิ้นสุดของค่าคุกกี้ถ้า (end == -1) end = documents.cookie.length; returnValue = unescape (documents.cookie.substring (ชดเชย, สิ้นสุด))}} returnValue; } function loadpopup () {if (get_cookie ('popped') == '') {openPopup () documents.cookie = "popped = ใช่"}} </script>พิมพ์รหัสต่อไปนี้ลงในพื้นที่ร่างกาย:
<body> // ป๊อปเมื่อออกไป
หรือ:
<body> // ป๊อปเมื่อเข้าสู่หน้า
คุณสามารถลองรีเฟรชหน้านี้หรือเข้ามาอีกครั้งและหน้าต่างจะไม่ปรากฏขึ้นอีกครั้ง ป๊อป-เดียวอย่างเดียว!
เมื่อเขียนสิ่งนี้แล้วเทคนิคการผลิตและแอปพลิเคชันของหน้าต่างป๊อปอัพนั้นเสร็จสิ้นแล้ว ฉันหวังว่าฉันจะยินดีเป็นอย่างยิ่งที่จะช่วยเพื่อนที่กำลังทำหน้าเว็บ
ควรสังเกตว่ากรณีในสคริปต์ JS นั้นมีความสอดคล้องกันอย่างดีที่สุดก่อนและหลัง
หน้าต่างป๊อปอัปที่ไม่มีเมนูแถบเครื่องมือและแถบที่อยู่:
รหัสมีดังนี้:
<script language = "java script"> <!- var gt = unescape ('%3e'); var popup = null; var over = "Launch Pop-Up Navigator"; popup = window.open ('', 'popupnav', 'width = 500, ความสูง = 500, resizable = 0, scrollbars = auto'); // width = 500, ความสูง = 500 เป็นความยาวของหน้าต่างและความกว้างถ้า (popup! = null) {ถ้า (popup.opener == null) {popup.opener = self; } popup.location.href = 'ชื่อไฟล์ที่จะเปิด'; } // -> </script>วิธีที่ 2: แอปพลิเคชันคุกกี้: หน้าต่างควบคุมป๊อปอัพเมื่อเราตั้งหน้าต่างป๊อปอัพป๊อปอัพในหน้าทุกครั้งที่เราเปลี่ยนหน้าหน้าหน้าต่างป๊อปจะปรากฏขึ้นโดยอัตโนมัติทำให้เกิดปัญหาที่ไม่จำเป็น แล้วจะแก้ปัญหานี้ได้อย่างไร? ที่นี่ฉันจะใช้ตัวอย่างง่ายๆเพื่ออธิบายวิธีการทำป๊อปอัพป๊อปอัพเฉพาะป๊อปอัพเมื่อเรียกดูหน้าเป็นครั้งแรกโดยการใช้งานคุกกี้และมันจะไม่ทำให้เกิดความรำคาญในอนาคตอีกต่อไป!
คัดลอกรหัสดังต่อไปนี้: <script> ฟังก์ชั่น OpenPopWindow () {window.Open ("hello.htm", "", "width = 200, ความสูง = 200" // แก้ไขหน้าต่างป๊อปอัพด้วยตัวคุณเอง} ฟังก์ชั่น get_cookie (ชื่อ) Documents.cookie.indexof (ค้นหา); ถ้า (ชดเชย! = -1) {// ถ้ามีการบันทึกคุกกี้ก่อนที่จะชดเชย += search.length; returnValue = unescape (documents.cookie.substring (ชดเชย, end))}} returnValue;
พิมพ์รหัสด้านบนลงในพื้นที่ร่างกาย: <body> // เปิดออกเมื่อออกจากหน้าเว็บ
หรือ: <body> // เอฟเฟกต์ของหน้าต่างป๊อปอัพปรากฏขึ้นเมื่อหน้าปรากฏขึ้นเมื่อออกจากหน้า:
เอฟเฟกต์: เมื่อคนอื่นปิดหน้านี้หน้าต่างจะปรากฏขึ้นและคุณสามารถเขียนคำอวยพรได้บ้าง
รหัสหลัก:
รหัสมีดังนี้:
<script language = "JavaScript"> <!-เริ่มต้นฟังก์ชั่นออก () {window.open ('1.htm', ", 'toolbar = no, menubar = ไม่, ตำแหน่ง = ไม่, ความสูง = 225, ความกว้าง = 235');ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น