1. หน้าต่าง Modal บน jQuery “Simple Modal Box” 2. ปลั๊กอิน jQuery “LeanModal”

การแสดงเนื้อหาในหน้าต่างโมดอล หากต้องการดูการทำงานของปลั๊กอินในหน้าสาธิต ให้คลิกที่ลิงก์: แบบฟอร์มลงทะเบียนหรือเนื้อหาพื้นฐาน

3. ปลั๊กอิน jQuery “ToastMessage”

ข้อความป๊อปอัป ปลั๊กอินมีสองเวอร์ชัน ในกรณีหนึ่ง ข้อความจะหายไปเองหลังจากช่วงระยะเวลาหนึ่ง ในการใช้งานครั้งที่สอง คุณต้องคลิกที่ปุ่มเพื่อปิดข้อความ

4. เนื้อหาที่ปรากฏขึ้นในหน้าต่างโมดอล

ปลั๊กอิน "เปิดเผย" หากต้องการดูการทำงานของปลั๊กอิน ให้คลิกที่ปุ่ม “Fire A Reveal Modal” บนหน้าสาธิต

5. กล่องโต้ตอบน่ารัก

คลิกที่กากบาทบนหน้าสาธิตเพื่อดูการทำงานของปลั๊กอิน

6. หน้าต่าง modal Mootools, ปลั๊กอิน “MooDialog” 7. แผงป๊อปอัป jQuery ที่ด้านบนของหน้าจอ 8. หน้าต่างป๊อปอัป jQuery

ปลั๊กอิน jQuery สำหรับการแสดงแบบฟอร์ม ข้อเสนอแนะในหน้าต่างป๊อปอัป

10. ปลั๊กอิน MooTools “LightFace” เพื่อการใช้งาน กล่องโต้ตอบเฟสบุ๊ค

กล่องโต้ตอบสไตล์ Facebook นอกจากข้อมูลคงที่แล้ว คุณยังสามารถวางรูปภาพ กรอบ คำขอของอาแจ็กซ์. การตั้งค่ามากมายเกี่ยวกับวิธีการทำงานของปลั๊กอิน ซึ่งเป็นเครื่องมือที่ทรงพลังมาก ดูมีสไตล์และใช้งานได้ดีมาก ตามลิงก์ในหน้าสาธิตเพื่อดูตัวอย่างที่มีเนื้อหาต่างๆ

11. หน้าต่างกิริยา jQuery

กล่องโต้ตอบป๊อปอัปที่เรียบร้อยใน jQuery

12. หน้าต่างกิริยา jQuery

หน้าต่างโมดอลป๊อปอัปที่น่ารัก สามสไตล์ หน้าสาธิตประกอบด้วย 3 ลิงก์สำหรับเปิดหน้าต่าง

13. หน้าต่างกิริยา jQuery

หน้าต่างโมดอลป๊อปอัปหลายประเภท หากต้องการดูการทำงานของปลั๊กอิน ให้คลิกที่ลิงก์ในหน้าสาธิต

15. ข้อความที่ปรากฏขึ้นด้านบนของหน้า

ข้อความจะปรากฏที่ด้านบนของหน้า ซึ่งจะจางลง คลิกที่ "คลิกฉัน" ในหน้าสาธิตเพื่อดูข้อความป๊อปอัป การคลิกที่ไม้กางเขนจะปิดลง ดำเนินการโดยใช้ jQuery

16. หน้าต่าง Modal “ModalBox” ในจาวาสคริปต์

ใช้กล่องโต้ตอบโมดอลสมัยใหม่โดยไม่ต้องใช้ป๊อปอัปและโหลดหน้าซ้ำ ในหน้าสาธิต คลิกที่ปุ่ม "เริ่มสาธิต" เพื่อดูการทำงานของสคริปต์

17. ปลั๊กอิน “Leightbox” โดยใช้ไลบรารี Prototype

ปลั๊กอินสำหรับแสดงเนื้อหาในหน้าต่างโมดอล

พูดคุยเกี่ยวกับ เทคนิคต่างๆการสร้างเว็บไซต์ คงเป็นเรื่องไร้สาระที่จะไม่บอกคุณเกี่ยวกับวิธีสร้างหน้าต่างโมดอล เราจะไม่หารือเกี่ยวกับวัตถุประสงค์ ประโยชน์ และปัญหาที่เกิดขึ้นของการใช้ป๊อปอัปและหน้าต่างโมดอล ลองดูตัวอย่างหนึ่งของการสร้างหน้าต่างดังกล่าว
มีบางสถานการณ์ที่ไม่สามารถใช้ปลั๊กอินพิเศษได้ เช่น และ ดังนั้นจึงควรทำความเข้าใจว่าคุณสามารถสร้างปลั๊กอินของคุณเองได้อย่างไร

มาดูวิธีการทำเช่นนี้:

HTML

เริ่มต้นด้วยการเพิ่มแท็กที่มีคุณสมบัติดังต่อไปนี้:

• href - #?w=500 ระบุความกว้างของหน้าต่าง
• rel - คุณลักษณะเฉพาะสำหรับแต่ละหน้าต่าง
• class="poplight" – คลาสสำหรับแสดงหน้าต่างป๊อปอัป

< a href= "#?w=500" rel= "popup_name" class = "poplight" >ดูหน้าต่างที่ใช้งานจริง - ความกว้าง = 500px

ดูหน้าต่างที่ใช้งานจริง - ความกว้าง = 500px

ต่อไปเราต้องสร้างมาร์กอัปแบบอินไลน์สำหรับป๊อปอัป คุณสามารถวางไว้ที่ใดก็ได้บนหน้า เช่น ที่ด้านล่างของเนื้อหา โปรดทราบว่ารหัสป๊อปอัปตรงกับแอตทริบิวต์ rel ของแท็ก
การดำเนินการนี้จะเชื่อมโยงลิงก์และป๊อปอัปเข้าด้วยกัน

หัวเรื่อง

ข้อความใด ๆ ที่คุณต้องการ

ดังนั้นเราจึงได้ทราบตำแหน่งของหน้าต่างของเราบนเพจแล้ว ทีนี้มาตกแต่งโดยใช้สไตล์กันดีกว่า ให้มันดูดี

เค้าโครง CSS

เพื่อความชัดเจนยิ่งขึ้น ฉันได้เขียนคำอธิบายบางอย่างเกี่ยวกับพารามิเตอร์สไตล์ของหน้าต่างของเรา เนื่องจากหน้าต่างป๊อปอัปสามารถมีขนาดแตกต่างกัน เราจึงไม่ระบุขอบของหน้าต่างใน CSS popup_block การคำนวณขนาดที่ต้องการจึงเป็นงานสำหรับ .

#fade ( จอแสดงผล : none ; /* --ค่าเริ่มต้นซ่อนเร้น--*/ พื้นหลัง : rgba ( 7 , 87 , 207 , 0.8 ) ; ตำแหน่ง: คงที่; ซ้าย: 0; ด้านบน: 0; ความกว้าง: 100%; ความสูง: 100%; ความทึบ: .80; ดัชนี z: 9999; ) .popup_block ( display : none ; /*--hidden by default--*/ background : #fff ; padding : 20px ; border : 8px solid rgb (134 , 134 , 134 ) ; float : left ; font-size : 85 %; ตำแหน่ง: คงที่; ด้านบน: 50%; ซ้าย: 50%; สี: #000; ความกว้างสูงสุด: 750px; ความกว้างต่ำสุด: 320px; ความสูง: อัตโนมัติ; ดัชนี z: 99999; /*--เงาบล็อก CSS3 --*/ -webkit-box-shadow: 0px 0px 20px #000 ; -moz-box-shadow: 0px 0px 20px #000 ; box-shadow : 0px 0px 20px #000 ; /*--การปัดเศษมุม CSS3--* / -webkit-border-radius: 12px ; -moz-border-radius: 12px ; border-radius : 12px ; ) .popup_block p ( Font-weight : 400 ; padding : 0 ; Margin : 0 ; color : #000 ; line -height : 1.6 ; .popup_block h2 ( margin : 0px 0 10px ; color : rgb (43 , 43 , 43 ) ; font-weight : 400 ; text-align : center ; text-shadow : 1px 1px 2px #0D0C0C ; ) / * สร้างปุ่มปิด */ .close ( สีพื้นหลัง : rgba ( 61 , 61 , 61 , 0.8 ) ; เส้นขอบ : 2px ทึบ #ccc ; ความสูง: 25px; ความสูงของบรรทัด: 20px; ตำแหน่ง: แน่นอน; ขวา: -17px; น้ำหนักตัวอักษร: ตัวหนา; การจัดแนวข้อความ: กึ่งกลาง; การตกแต่งข้อความ: ไม่มี; ช่องว่างภายใน: 0; ด้านบน: -17px; ความกว้าง: 25px; -webkit-เส้นขอบ-รัศมี: 50% ; -moz-border-radius: 50% ; -ms-เส้นขอบรัศมี: 50% ; -o-เส้นขอบรัศมี: 50% ; รัศมีเส้นขอบ : 50% ; -moz-box-shadow: 1px 1px 3px #000 ; -webkit-box-shadow: 1px 1px 3px #000 ; กล่องเงา : 1px 1px 3px #000 ; ) .ปิด : ก่อน ( color : rgba (255 , 255 , 255 , 0.9 ) ; content : "X" ; font-size : 12px ; text-shadow : 0 -1px rgba (0 , 0 , 0 , 0.9 ) ; ) .close : โฮเวอร์ ( สีพื้นหลัง : rgba ( 252 , 20 , 0 , 0.8 ) ; ) .shadow ( กล่องเงา : 4px 4px 10px #857373 ; -webkit-box-shadow: 4px 4px 10px #857373 ; -moz- กล่องเงา: 4px 4px 10px #857373; padding: 0 ; ) /*--ตำแหน่งคงที่สำหรับ IE6--*/ * html #fade ( ตำแหน่ง : แน่นอน ; ) * html .popup_block ( ตำแหน่ง : แน่นอน ; )

#fade ( จอแสดงผล: ไม่มี;/*--ซ่อนไว้โดยค่าเริ่มต้น--*/ พื้นหลัง: rgba(7, 87, 207, 0.8); ตำแหน่ง: คงที่; ซ้าย: 0; ด้านบน: 0; ความกว้าง: 100%; ความสูง: 100%; ความทึบ: .80; z-index: 9999; ) .popup_block ( display: none; /*--hidden by default--*/ background: #fff; padding: 20px; border: 8px solid rgb(134, 134, 134); ลอย: ซ้าย; ขนาดตัวอักษร: 85%; ตำแหน่ง: คงที่; ด้านบน: 50%; ซ้าย: 50%; สี: #000; ความกว้างสูงสุด: 750px; ความกว้างขั้นต่ำ: 320px; ความสูง: อัตโนมัติ ; ดัชนี z: 99999; /*--เงากล่อง CSS3--*/ -webkit-box-shadow: 0px 0px 20px #000; -moz-box-shadow: 0px 0px 20px #000; กล่องเงา: 0px 0px 20px #000; /*--การปัดเศษมุม CSS3--*/ -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; ) .popup_block p ( น้ำหนักตัวอักษร: 400; ช่องว่างภายใน: 0; ระยะขอบ: 0; สี: #000; ความสูงบรรทัด: 1.6;).popup_block h2 (ระยะขอบ: 0px 0 10px; สี: rgb(43, 43, 43); น้ำหนักแบบอักษร: 400; การจัดแนวข้อความ : center; text-shadow: 1px 1px 2px #0D0C0C; ) /* สร้างปุ่มปิด */ .close ( สีพื้นหลัง: rgba(61, 61, 61, 0.8); เส้นขอบ: 2px ทึบ #ccc; ความสูง: 25px; ความสูงของบรรทัด: 20px; ตำแหน่ง: แน่นอน; ขวา: -17px; น้ำหนักตัวอักษร: ตัวหนา; การจัดแนวข้อความ: กึ่งกลาง; การตกแต่งข้อความ: none; padding: 0; ด้านบน: -17px; ความกว้าง: 25px; -webkit-เส้นขอบ-รัศมี: 50%; -moz-border-รัศมี: 50%; -ms-เส้นขอบรัศมี: 50%; -o-เส้นขอบรัศมี: 50%; รัศมีชายแดน: 50%; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; กล่องเงา: 1px 1px 3px #000; ) .ปิด:ก่อน ( สี: rgba(255, 255, 255, 0.9); เนื้อหา: "X"; ขนาดตัวอักษร: 12px; เงาข้อความ: 0 -1px rgba(0, 0, 0, 0.9); ) .ปิด:โฮเวอร์ ( สีพื้นหลัง: rgba(252, 20, 0, 0.8); ) .shadow ( กล่องเงา:4px 4px 10px #857373; -webkit-box-shadow:4px 4px 10px #857373; -moz- box-shadow:4px 4px 10px #857373; padding:0; ) /*--ตำแหน่งคงที่สำหรับ IE6--*/ *html #fade ( ตำแหน่ง: แน่นอน; ) *html .popup_block ( ตำแหน่ง: แน่นอน; )

ด้วยการก่อตัวของหน้าต่างและมัน รูปร่างกับ ใช้ cssฉันคิดว่าจะไม่มีปัญหาพิเศษใดๆ คุณสามารถลงทะเบียนสไตล์ได้โดยตรงที่ หน้า HTMLระหว่างแท็ก และ หรือคุณสามารถวางไว้ในไฟล์แยกต่างหากสำหรับสไตล์ของคุณ ซึ่งโดยปกติจะเป็นไฟล์ style.css หรืออะไรทำนองนั้น

การตั้งค่า JQuery

สำหรับ งานเต็มเปี่ยมหน้าต่างโมดอล คุณต้องเชื่อมต่อ jQuery ผู้ที่ไม่คุ้นเคยกับการทำงานของไลบรารีนี้สามารถอ่านได้

เราจะไปต่อ คุณสามารถทำอะไรได้มากที่สุด รุ่นล่าสุด JQuery จากเว็บไซต์ห้องสมุด หรือใช้ไฟล์แยกต่างหากที่อยู่ในส่วนลึกของ Google โดยเชื่อมต่อกับเอกสาร ในส่วนก่อนแท็กปิด วางบรรทัดต่อไปนี้:

ในขั้นตอนถัดไปเราจะมาดูการเติมและฟังก์ชันกัน ปลั๊กอิน jqueryเพื่อเปิดใช้งานป๊อปอัปของเรา โค้ดจะมีคำอธิบายบางอย่างเพื่อให้เข้าใจได้ดีขึ้นว่าเรากำลังทำอะไรอยู่

ปลั๊กอิน JQuery

$(เอกสาร) . พร้อม (ฟังก์ชัน () ( //เมื่อคลิกลิงก์ที่มีคลาส poplight และแอตทริบิวต์แท็ก href ด้วย # $("a.poplight") ) click(function () ( var popID = $(this) . attr("rel" ) ; // รับชื่อของหน้าต่าง สิ่งสำคัญคืออย่าลืมเมื่อเพิ่มอันใหม่เพื่อเปลี่ยนชื่อในแอตทริบิวต์ rel ของ link var popURL = $(this) . attr(" href" ) ; // รับขนาดจากแอตทริบิวต์ href ของลิงก์ //query และตัวแปรจาก href url var query= popURL.split ("?" ) ; var dim = query[ 1 ] . split ("&" ) ; var popWidth = dim[ 0 ] . split ("=" ) [ 1 ] ; // ค่าแรกของสตริงการสืบค้น // เพิ่มปุ่มปิดไปที่หน้าต่าง $( "#" + popID) . fadeIn() . css(( "width" : Number( popWidth ) ) ). ("#" + popID) . height() + 80 ) / 2 ; var popMargLeft = ($("# " + popID) . width() + 80 ) / 2 ; //ตั้งค่าการเยื้อง $("#" + popID) .css(( "margin-top" : - popMargTop, "margin-left" : - popMargLeft ) ) ; //เพิ่มพื้นหลังสีเข้มโปร่งแสง $("body" ) . ผนวก("" ) ; //คอนเทนเนอร์ div จะถูกวางไว้หน้าแท็ก $("#จาง") . css(( "ตัวกรอง" : "อัลฟา(ความทึบ=80)" ) ) . จางหายไป() ; // ความโปร่งแสงของเลเยอร์, ​​ตัวกรองสำหรับ IE ที่โง่กลับเท็จ; ) ) ; //ปิดหน้าต่างและหรี่แสงพื้นหลัง $(document) on("click" , "a.close, #fade" , function () ( //ปิดโดยการคลิกนอกหน้าต่าง เช่น บนพื้นหลัง... $("#fade , .popup_block" ) . fadeOut(function ( ) ( $("#fade, a.close" ) . Remove() ; //fades ได้อย่างราบรื่น ) ) ; return false ; ) ) ; ) ) ;

$(document).ready(function())( //เมื่อคลิกลิงก์ที่มีคลาส poplight และแอตทริบิวต์แท็ก href ด้วย # $("a.poplight").click(function() ( var popID = $(this).attr("rel"); //รับชื่อหน้าต่าง สิ่งสำคัญคืออย่าลืมเปลี่ยน ชื่อในแอตทริบิวต์ rel ของลิงก์เมื่อเพิ่มใหม่ var popURL = $(this).attr("href"); // รับขนาดจากแอตทริบิวต์ href ของลิงก์ // แบบสอบถามและตัวแปรจากแบบสอบถาม href url var = popURL.split("?"); var dim= query.split( "&"); var popWidth = dim.split("="); // ค่าแรกของสตริงการสืบค้น // เพิ่มปุ่มปิดไปที่ window $("#" + popID).fadeIn().css(( "width": Number(popWidth) )).prepend(""); //กำหนดระยะขอบ (ระยะขอบ) สำหรับการจัดตำแหน่งกึ่งกลาง (แนวตั้งและแนวนอน) - เราบวก 80 เข้ากับความสูง / ความกว้าง โดยคำนึงถึงช่องว่างภายใน + ความกว้างของเฟรมที่กำหนดใน css var popMargTop = ($("#" + popID).height() + 80) / 2; var popMargLeft = ($("# " + popID).width() + 80) / 2; //ตั้งค่าการเยื้อง $("# " + popID).css(( "margin-top" : -popMargTop, "margin-left" : -popMargLeft ) ); //เพิ่มพื้นหลังสีเข้มแบบโปร่งแสง $("body").append(""); //div คอนเทนเนอร์จะถูกแสดงก่อนแท็ก $("#fade").css(("filter" : "alpha(opacity=80)")).fadeIn(); // ความโปร่งแสงของเลเยอร์, ​​ตัวกรองสำหรับ IE ที่โง่ส่งคืนเท็จ; )); //ปิดหน้าต่างแล้วทำให้พื้นหลังจางลง $(document).on("click", "a.close, #fade", function() ( //ปิดโดยการคลิกนอกหน้าต่าง เช่น ที่พื้นหลัง... $( "#fade , .popup_block").fadeOut(function() ( $("#fade, a.close").remove(); //fade out )); กลับ false; )); ));

บทสรุป:

โดยทั่วไป หากคุณไม่เข้าไปยุ่งวุ่นวายและไม่เป็นภาระกับโค้ดที่ไม่จำเป็น gobbledygook หน้าต่างโมดอลที่ยอดเยี่ยมของเราก็พร้อมใช้งานแล้ว และกำลังรอความคิดของคุณที่แปลเป็นข้อความหรือข้อมูลที่เป็นประโยชน์อื่น ๆ อยู่
สำหรับผู้ที่ต้องการใช้หน้าต่างโมดอลเพื่อวางวิดีโอหรือรูปภาพขนาดใหญ่ในนั้น ฉันยังคงแนะนำให้ใช้ปลั๊กอินพิเศษเช่น เนื่องจากตัวอย่างข้างต้นของหน้าต่างโมดอลมีไว้สำหรับข้อมูลที่เบาและไม่หนักมาก ถึงแม้ว่าสิ่งนี้ ไม่ใช่ปัญหาหากต้องการ

ครั้งต่อไปฉันจะบอกคุณอย่างแน่นอนและแสดงตัวอย่างให้คุณดู และแน่นอนว่าหลายคนจะสนใจที่จะเรียนรู้เกี่ยวกับวัตถุของบุคคลที่สามอื่น ๆ ในหน้าต่างป๊อปอัป ดังนั้นอย่าหลงทางในเว็บและคอยติดตาม!

อัปเดต: เวอร์ชัน dm-modal.js v1.3 (15/01/2017)
แก้ไขแล้ว: แทนที่ฟังก์ชัน .live() ที่ล้าสมัย โดยใช้ไวยากรณ์ href*=\\# ขณะนี้ปลั๊กอินใช้งานได้กับไลบรารี jQuery เวอร์ชันปัจจุบัน

นั่นคือทั้งหมด! ฉันหวังว่านี่จะเป็นบทเรียนที่มีประโยชน์อีกบทหนึ่ง

ด้วยความเคารพ แอนดรูว์

บ่อยครั้งที่คุณจะพบหน้าต่างโมดอลบนเว็บไซต์ และหน้าต่างเหล่านี้ใช้สำหรับงานที่แตกต่างกัน อันที่จริงนี่เป็นเครื่องมือที่ทรงพลังมากที่ช่วยให้คุณทำให้อินเทอร์เฟซของไซต์โต้ตอบและสะดวกยิ่งขึ้น ตัวอย่างเช่น หน้าต่างโมดอลสามารถใช้กับแบบฟอร์มต่างๆ ได้ เช่น แบบฟอร์มการอนุญาต แบบฟอร์มตอบรับ การสั่งซื้อผลิตภัณฑ์ และคุณไม่มีทางรู้

ในโพสต์นี้ เราจะดูตัวอย่างวิธีสร้างหน้าต่างโมดอลอย่างง่ายโดยใช้ JQuery และ CSS ลักษณะเฉพาะของตัวอย่างนี้คือ ไม่จำเป็น ยกเว้นไลบรารี JQuery เอง

วางรหัสหน้าต่างโมดอลบนหน้า:

ปิด เปิดหน้าต่างโมดอล

ดังที่คุณเห็นจากมาร์กอัป บล็อกของหน้าต่างโมดอลนั้นเป็น div ที่มีแอตทริบิวต์ id= modal_formซึ่งมีองค์ประกอบ span พร้อมด้วย id= modal_close. องค์ประกอบนี้จะทำหน้าที่เป็นปุ่มเพื่อปิดหน้าต่างโมดอล นอกจากนี้ ใต้บล็อกจะมีบล็อก div พร้อมด้วยแอตทริบิวต์ id= ซ้อนทับซึ่งทำหน้าที่ทำให้พื้นหลังมืดลงด้วย หน้าต่างโมดอลจะเปิดขึ้นโดยลิงก์พร้อมกับคลาส เป็นกิริยาช่วย.

CSS สำหรับหน้าต่างโมดอล

#modal_form ( กว้าง: 300px; ความสูง: 300px; รัศมีเส้นขอบ: 5px; เส้นขอบ: 3px #000 ทึบ; พื้นหลัง: #fff; ตำแหน่ง: คงที่; ด้านบน: 45%; ซ้าย: 50%; ระยะขอบด้านบน: -150px; ขอบซ้าย: -150px; จอแสดงผล: ไม่มี; ความทึบ: 0; ดัชนี z: 5; การขยาย: 20px 10px; ) #modal_form #modal_close ( ความกว้าง: 21px; ความสูง: 21px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 10px; ขวา: 10px; เคอร์เซอร์: ตัวชี้; จอแสดงผล: บล็อก; ) #overlay ( z-index:3; ตำแหน่ง:คงที่; สีพื้นหลัง:#000; ความทึบ:0.8; -moz-opacity:0.8; ตัวกรอง:อัลฟา(ความทึบ=80) ; ความกว้าง:100%; ความสูง:100%; ด้านบน:0; ซ้าย:0; เคอร์เซอร์:ตัวชี้; จอแสดงผล:ไม่มี; )

สำหรับ modal_formเรากำหนดความกว้างและความสูงคงที่ จากนั้นจัดตำแหน่งให้อยู่กึ่งกลางหน้าจอ สำหรับพื้นหลังหน้าต่างโมดอล ( ซ้อนทับ) เรากำหนดขนาดให้พอดีกับความกว้างของหน้าจอ เติมความโปร่งใส และยังซ่อนไว้ตามค่าเริ่มต้นอีกด้วย ช่วงเวลาพิเศษกับ ดัชนี zโมดอลควรมีองค์ประกอบที่ใหญ่ที่สุดในเพจ และหน้าปกควรมีองค์ประกอบที่ใหญ่ที่สุดในบรรดาองค์ประกอบทั้งหมด ยกเว้นโมดอลเอง

มาถึงสิ่งพื้นฐานที่สุด นี่คือโค้ดจาวาสคริปต์ หน้าต่างโมดอลจะใช้สองเหตุการณ์หลัก: การเปิด - การคลิกที่องค์ประกอบที่มีคลาส เป็นกิริยาช่วยในกรณีของเรา นี่คือลิงก์ และการปิดหน้าต่างโมดอลคือการคลิกที่หน้าปก ( ซ้อนทับ) หรือคลิกที่ปุ่มปิด ในกรณีของเรา นี่คือองค์ประกอบ span ที่มี id= modal_close.

$(document).ready(function() ( $(".modal").click(function(event)( event.preventDefault(); $("#overlay").fadeIn(400, // ทำให้การแสดงผลของ ฟังก์ชั่นปก ()( // ถัดไปแสดงหน้าต่าง mod $("#modal_form") .css("display", "block") .animate((ความทึบ: 1, ด้านบน: "50%"), 200); )); )); // ปิดหน้าต่างโมดอล $("#modal_close, #overlay").click(function())( $("#modal_form") .animate((opacity: 0, top: "45% "), 200, // ลดฟังก์ชันความโปร่งใส())( // หลังภาพเคลื่อนไหว $(this).css("display", "none"); // ซ่อนหน้าต่าง $("#overlay").fadeOut (400); // ซ่อนพื้นหลัง ) ); )); ));

การใช้ภาพเคลื่อนไหวเราเปลี่ยนตำแหน่งแนวตั้ง สูงสุดตลอดจนความโปร่งใส ความทึบและด้วยสิ่งนี้ เราจึงได้ผลลัพธ์ที่น่าสนใจ เอฟเฟกต์ที่คล้ายกันนี้ใช้ทั้งเมื่อเปิดหน้าต่างและเมื่อปิด ข้อแตกต่างคือลำดับการใช้คุณสมบัติกับบล็อกจะเปลี่ยนไป ดังนั้นจึงแสดงภาพการเปิดและปิดหน้าต่าง

หน้าต่าง Modal เป็นส่วนสำคัญของการออกแบบเว็บไซต์สมัยใหม่ด้วยความช่วยเหลือนักพัฒนาสามารถใช้วิธีการวนซ้ำในหน้าเดียวและไม่เปลี่ยนเส้นทางผู้เยี่ยมชมไปยังหน้ารอง ในบทช่วยสอนนี้ เราจะดูวิธีสร้างหน้าต่างโมดอลที่ยอดเยี่ยมพร้อมพื้นหลังเบลอสำหรับเว็บไซต์ของคุณโดยใช้ jQuery และ CSS3 ตามกฎเหล่านี้ เราจะสร้างพื้นหลังเบลอเมื่อหน้าต่างปรากฏขึ้น ซึ่งจะดึงดูดสายตาของผู้เยี่ยมชมเฉพาะกับข้อมูลที่จำเป็นบนเว็บไซต์เท่านั้น

หน้าต่าง Modal ที่มีพื้นหลังเบลอใน CSS3

ข่าวเศรษฐกิจที่ดีที่สุดอยู่ที่นี่เท่านั้น: Drobakha

ภาพเคลื่อนไหวของหน้าต่างจะถูกตั้งค่าในลักษณะที่เมื่อคุณคลิกที่ปุ่มเพื่อให้ปรากฏขึ้น หน้าต่างจะเคลื่อนไหวจากบนลงล่าง และความเบลอของพื้นหลังจะเพิ่มขึ้นโดยอัตโนมัติ

ขั้นตอนที่ 1 HTML

เราจะมีคอนเทนเนอร์ที่จะประกอบด้วย: ชื่อ คำอธิบาย จากนั้นเราจะเพิ่มคลาสสำหรับปุ่มด้วยคลาส toggleModal เพื่อเปิดหน้าต่างโมดอล:

หัวเรื่อง

คำอธิบาย

เปิดชื่อบทความสำหรับหน้าต่าง

แท็บเป็นสิ่งที่น่าสนใจและสะดวกสบายมากในการสร้างเว็บไซต์ซึ่งช่วยให้คุณสามารถจัดระเบียบข้อมูลได้อย่างเหมาะสมพร้อมทั้งประหยัดพื้นที่บนเว็บไซต์

ปิด

จากนั้นเราจำเป็นต้องเพิ่มคลาส modal is-active คลาสนี้จะรับผิดชอบในการเรียกหน้าต่าง modal modal__header รับผิดชอบชื่อเรื่องและสไตล์ของหน้าต่าง

ขั้นตอนที่ 2: CSS

ตอนนี้เรามาดูการออกแบบกันก่อน ขั้นตอนแรกคือคลาสปุ่มซึ่งตามที่คุณเดาไว้ เราจะตั้งค่าพารามิเตอร์การแสดงผลที่ถูกต้องสำหรับปุ่มต่างๆ บนไซต์:

ปุ่ม ( พื้นหลัง: ไม่มี; พื้นหลังคลิป: padding-box; จอแสดงผล: inline-block; เส้นขอบ: 0; ผู้ใช้เลือก: ไม่มี; -webkit-touch-callout: none; -webkit-appearance: ปุ่ม; -webkit-user -select: none; -moz-user-select: none; -ms-user-select: none; )

คอนเทนเนอร์ ( ตำแหน่ง: สัมพันธ์; ระยะขอบ:0 อัตโนมัติ; ความกว้างสูงสุด: 960px; ขนาดกล่อง: border-box; padding-top: 40px; )

บทความ ( พื้นหลัง: #fff; การขยาย: 20px; ระยะขอบด้านล่าง: 40px; รัศมีเส้นขอบ: 5px; ) .modal ( จอแสดงผล: ไม่มี; ตำแหน่ง: คงที่; ด้านบน: 50%; ความกว้าง: 100%; ความสูง: อัตโนมัติ; ระยะขอบ -ด้านบน: -150px; สีพื้นหลัง: $สี-ขาว; รัศมีเส้นขอบ: 3px; ดัชนี z: 999; กล่องเงา: 0px 1px 3px 0px เข้มขึ้น($สี-bg, 10%); @media #( $small) ( ซ้าย: 50%; ขอบซ้าย: -260px; ความกว้างสูงสุด: 520px; ) &.is-active ( จอแสดงผล: บล็อก; ภาพเคลื่อนไหว: สไลด์เชิงเส้น 1 วินาที; ) .inner ( ตำแหน่ง: สัมพันธ์; การขยาย: 20px ; ) .modal__header ( ขอบด้านล่าง: 1px solid darken($color-bg, 5%); ) .modal__footer ( text-align: center; button ( display: inline-block; ) )

สไตล์ค่อนข้างเรียบง่ายมันถูกเก็บไว้ แยกไฟล์และไม่ควรทำให้เกิดปัญหาในการแก้ไขสำหรับนักพัฒนาที่เคยพบ CSS อย่างน้อยหนึ่งครั้ง

ขั้นตอนที่ 3 จส

สิ่งสุดท้ายของเราแต่มีความสำคัญไม่แพ้กันคือการตั้งค่าการเบลอพื้นหลังอัตโนมัติเมื่อเมนูปรากฏขึ้น เช่นเดียวกับความสามารถในการคลิกลิงก์ กฎ JS ขนาดเล็กจะช่วยเราในเรื่องนี้:

$("body").addClass("เบลอ"); $(".toggleModal").on("คลิก", ​​ฟังก์ชั่น (เหตุการณ์) ( event.preventDefault(); $(".modal").toggleClass("is-active"); $("body").toggleClass ("เบลอ"); ));

ผลลัพธ์ที่ได้คือหน้าต่างโมดัลที่ยอดเยี่ยมที่ดึงดูดสายตาของผู้ชม และไม่ทำให้การออกแบบของคุณเกะกะ

3. ตัวอย่างหน้าต่าง modal jQuery ที่เรียกจากลิงก์ (จากการสาธิต)

เป็นไปได้มากว่าคุณเคยเห็นหน้าต่างโมดอลป๊อปอัปบนอินเทอร์เน็ตมากกว่าหนึ่งครั้ง - การยืนยันการลงทะเบียน คำเตือน ข้อมูลอ้างอิง, ดาวน์โหลดไฟล์ และอื่นๆ อีกมากมาย ในบทช่วยสอนนี้ ฉันจะเสนอตัวอย่างหลายประการเกี่ยวกับวิธีสร้างหน้าต่างโมดอลที่ง่ายที่สุด

การสร้างหน้าต่างโมดอลป๊อปอัปแบบง่าย เรามาเริ่มดูโค้ดสำหรับหน้าต่างโมดอลแบบง่ายที่จะปรากฏขึ้นทันที
รหัส jQuery

$(เอกสาร).พร้อม(ฟังก์ชั่น()
{
alert("ข้อความในหน้าต่างป๊อปอัป");
});

วางโค้ดไว้ที่ใดก็ได้ในส่วนเนื้อหาของเพจ ทันทีที่โหลดเพจ คุณจะเห็นหน้าต่างที่มีลักษณะดังนี้:

แต่โค้ดต่อไปนี้จะถูกดำเนินการหลังจากโหลดทั้งหน้าลงในเบราว์เซอร์ ในตัวอย่างของเรา หลังจากที่โหลดหน้าที่มีรูปภาพแล้ว หน้าต่างป๊อปอัปธรรมดาจะปรากฏขึ้น:

$(หน้าต่าง).โหลด(ฟังก์ชั่น()
{
alert("โหลดเพจเสร็จแล้ว!)");
});

การเรียกหน้าต่างโมดอล jQuery จากลิงก์ด้วย CSS ขั้นตอนต่อไปคือการสร้างหน้าต่างโมดอลเมื่อมีการคลิกลิงก์ พื้นหลังจะค่อยๆมืดลง

คุณมักจะเห็นว่าแบบฟอร์มเข้าสู่ระบบและการลงทะเบียนอยู่ในหน้าต่างดังกล่าว มาทำธุรกิจกันเถอะ

ก่อนอื่นเรามาเขียนส่วน html กันก่อน เราวางรหัสนี้ไว้ในเนื้อหาของเอกสารของคุณ

การเรียกหน้าต่างโมดอล

ข้อความหน้าต่าง Modal
ปิด
ข้อความในหน้าต่างโมดอล

รหัสซีเอสเอส ไม่ว่าจะอยู่ในไฟล์ css แยกต่างหากหรือในส่วนหัว

ร่างกาย (
ตระกูลแบบอักษร: verdana;
ขนาดตัวอักษร:15px;
}
.link (color:#fff; ตกแต่งข้อความ:none)
.link:hover (สี:#fff; ตกแต่งข้อความ:ขีดเส้นใต้)
#หน้ากาก (
ตำแหน่ง:แน่นอน;
ซ้าย:0;
ด้านบน:0;
ดัชนี z:9000;
สีพื้นหลัง:#000;
จอแสดงผล:ไม่มี;
}
#boxes.หน้าต่าง (
ตำแหน่ง:แน่นอน;
ซ้าย:0;
ด้านบน:0px;
-บน: 40px;
ความกว้าง:440px;
ความสูง:200px;
จอแสดงผล:ไม่มี;
ดัชนี z:9999;
ช่องว่างภายใน: 20px;
ล้น: ซ่อนเร้น;
}
#boxes #กล่องโต้ตอบ (
ความกว้าง:375px;
ความสูง:203px;
ช่องว่างภายใน:10px;
สีพื้นหลัง:#ffffff;
}
.สูงสุด(
ตำแหน่ง:แน่นอน;
ซ้าย:0;
ด้านบน:0;
ความกว้าง:370px;
ความสูง:30px;
พื้นหลัง: #0085cc;
การขยาย: 8px 20px 6px 10px;
}
.ปิด(
ลอย:ขวา;
}
.เนื้อหา(
ช่องว่างด้านบน: 35px;
}

ในโค้ด jQuery เราจะเน้นที่ตำแหน่งของหน้าต่างโมดอลและมาสก์ ในกรณีของเราคือการทำให้พื้นหลังมืดลงทีละน้อย

ความสนใจ! อย่าลืมรวมไลบรารีไว้ที่ส่วนหัวของเอกสารด้วย!

การเชื่อมต่อห้องสมุดจากเว็บไซต์ Google รหัส jQuery นั้นเอง

รหัส jQuery

$(เอกสาร).ready(ฟังก์ชั่น() (
$("a").คลิก(ฟังก์ชั่น(e) (
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(เอกสาร).height();
var maskWidth = $(หน้าต่าง).ความกว้าง();
$("#mask").css(("width":maskWidth,"height":maskHeight));
$("#mask").fadeIn(1,000);
$("#mask").fadeTo("ช้า",0.8);
var winH = $(หน้าต่าง).ความสูง();
var winW = $(หน้าต่าง).ความกว้าง();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("ซ้าย", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").คลิก(ฟังก์ชั่น (e) (
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").คลิก(ฟังก์ชั่น () (
$(นี่).ซ่อน();
$(".window").hide();
});
});