หน้าต่างโมดอล Jquery พร้อมพื้นหลังเบลอ สร้างโมดอลป๊อปอัป jQuery jQuery โมดอล
หน้าต่างโมดอล Jquery พร้อมพื้นหลังเบลอ สร้างโมดอลป๊อปอัป jQuery jQuery โมดอล
การพูดเกี่ยวกับเทคนิคการสร้างไซต์ต่างๆ คงจะเป็นเรื่องน่าขันที่จะไม่พูดถึงวิธีการบางอย่างในการสร้างหน้าต่างโมดอล เราจะไม่พูดถึงวัตถุประสงค์ ประโยชน์ และปัญหาที่เกิดขึ้นของการใช้ป๊อปอัป หน้าต่างโมดอล มาวิเคราะห์ตัวอย่างการสร้างหน้าต่างดังกล่าวเพียงหนึ่งในหลายตัวอย่าง
เรามาดูวิธีการทำ:
Html เริ่มต้นด้วยการเพิ่มแท็กด้วยแอตทริบิวต์ต่อไปนี้:
href - #? w = 500 หมายถึงความกว้างของหน้าต่าง rel - คุณลักษณะเฉพาะสำหรับแต่ละหน้าต่าง class = "poplight" - คลาสสำหรับแสดงหน้าต่างป๊อปอัป
<
a href=
"#?w=500"
rel=
"popup_name"
class
=
"poplight"
>ดูหน้าต่างการทำงาน - ความกว้าง = 500px
ดูหน้าต่างการทำงาน - ความกว้าง = 500px
ต่อไป เราต้องสร้างอินไลน์มาร์กอัปสำหรับป๊อปอัป คุณสามารถวางไว้ที่ใดก็ได้บนหน้า เช่น ที่ด้านล่างของเนื้อหา โปรดทราบว่ารหัสป๊อปอัปตรงกับแอตทริบิวต์ เรล แท็ก
ดังนั้นเราจึงหาตำแหน่งของหน้าต่างของเราบนหน้า ตอนนี้ มากำหนดสไตล์ด้วยสไตล์กันเถอะ พูดได้เลยว่า ดูดี
เค้าโครง CSS เพื่อความชัดเจน ฉันได้เขียนคำอธิบายบางอย่างสำหรับพารามิเตอร์ลักษณะของหน้าต่างของเรา เนื่องจากป๊อปอัปอาจมีขนาดต่างกัน เราจึงไม่ระบุใน CSS popup_block ขอบหน้าต่าง การคำนวณขนาดที่ต้องการ นี่เป็นเพียงงานสำหรับ
#fade (จอแสดงผล: ไม่มี; / * - ซ่อนไว้โดยค่าเริ่มต้น - * / พื้นหลัง: rgba (7, 87, 207, 0.8); ตำแหน่ง: คงที่; ซ้าย: 0; ด้านบน: 0; ความกว้าง: 100%; ความสูง: 100%; ความทึบ: .80; ดัชนี z: 9999; ) .popup_block (แสดง: ไม่มี; / * - ซ่อนไว้โดยค่าเริ่มต้น - * / พื้นหลัง: #fff; ช่องว่างภายใน: 20px; เส้นขอบ: 8px ของแข็ง 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-รัศมี: 12px; -moz-border-รัศมี: 12px; รัศมีเส้นขอบ: 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); border: 2px solid #ccc; height: 25px; line-height: 20px; position: absolute; right: -17px; font-weight: bold; จัดข้อความ: กึ่งกลาง; ตกแต่งข้อความ: ไม่มี; ช่องว่างภายใน: 0; ด้านบน: -17px; ความกว้าง: 25px; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border- รัศมี: 50%; -o-border-radius: 50%; border-radius: 50%; -moz-box-shadow: 1px 1px 3px # 000; -webkit-box-shadow: 1px 1px 3px # 000; box- เงา: 1px 1px 3px # 000;) .close: before (สี: rgba (255, 255, 255, 0.9); เนื้อหา: "X"; ขนาดตัวอักษร: 12px; text-shadow: 0 -1px rgba (0, 0, 0, 0.9);) .close: hover (สีพื้นหลัง: 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; ช่องว่างภายใน: 0;) / * - ตำแหน่งคงที่สำหรับ IE6 - * / * html #fade (ตำแหน่ง: สัมบูรณ์;) * html .popup_block (ตำแหน่ง: สัมบูรณ์;)
#fade (แสดง: none; / * - ซ่อนไว้โดยค่าเริ่มต้น - * / พื้นหลัง: rgba (7, 87, 207, 0.8); ตำแหน่ง: คงที่; ซ้าย: 0; ด้านบน: 0; ความกว้าง: 100%; ความสูง: 100% ; opacity: .80; z-index: 9999;) .popup_block (display: none; / * - hidden by default - * / background: #fff; padding: 20px; border: 8px solid rgb (134, 134, 134) ; float: ซ้าย; ขนาดตัวอักษร: 85%; ตำแหน่ง: คงที่; บนสุด: 50%; ซ้าย: 50%; สี: # 000; ความกว้างสูงสุด: 750px; ความกว้างขั้นต่ำ: 320px; ความสูง: อัตโนมัติ ; z-index : 99999; / * - CSS3 box shadow - * / -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; ความสูงของบรรทัด: 1.6;) .popup_block h2 (ระยะขอบ: 0px 0 10px; สี: rgb (43, 43, 43); font-weight: 400; text-align : center; text-shadow: 1px 1px 2px # 0D0C0C;) / * สร้างปุ่มปิด * / .close (backgro ยกเลิกสี: rgba (61, 61, 61, 0.8); เส้นขอบ: 2px ทึบ #ccc; ความสูง: 25px; ความสูงของบรรทัด: 20px; ตำแหน่ง: สัมบูรณ์; ขวา: -17px; font-weight: ตัวหนา; จัดข้อความ: ศูนย์; การตกแต่งข้อความ: none; padding: 0; ด้านบน: -17px; ความกว้าง: 25px; -webkit-border-รัศมี: 50%; -moz-border-รัศมี: 50%; -ms-border-รัศมี: 50%; -o-เส้นขอบรัศมี: 50%; รัศมีขอบ: 50%; -moz-box-shadow: 1px 1px 3px # 000; -webkit-box-shadow: 1px 1px 3px # 000; กล่องเงา: 1px 1px 3px # 000; ) .close: before (สี: rgba (255, 255, 255, 0.9); content: "X"; font-size: 12px; text-shadow: 0 -1px rgba (0, 0, 0, 0.9);) .close: hover (สีพื้นหลัง: rgba (252, 20, 0, 0.8);) .shadow (box-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 $ (เอกสาร). พร้อม (ฟังก์ชัน () ( // เมื่อคลิกลิงก์ที่มีคลาสป๊อปไลท์และ href ของแอตทริบิวต์แท็ก กับ # $ ("a.poplight") คลิก (ฟังก์ชัน () (var popID = $ (นี่) attr ("rel"); // รับชื่อหน้าต่างสิ่งสำคัญคือต้องไม่ลืมเปลี่ยนชื่อในแอตทริบิวต์ rel ของลิงก์เมื่อเพิ่มใหม่ var popURL = $ (นี่) attr ("href"); // รับขนาดจากแอตทริบิวต์ href ของลิงก์
// คำขอและตัวแปรจาก href url var แบบสอบถาม = popURL แยก ("?"); var dim = แบบสอบถาม [1] แยก ("&"); var popWidth = สลัว [0] แยก ("=") [1]; // ค่าแรกของสตริงการสืบค้น
// เพิ่มปุ่มปิดที่หน้าต่าง $ ("#" + popID) จางใน (). css (("ความกว้าง": ตัวเลข (popWidth))) นำหน้า ( ""
)
;
// กำหนดระยะขอบ (ระยะขอบ) สำหรับการจัดตำแหน่งกึ่งกลาง (แนวตั้งและแนวนอน) - เราเพิ่ม 80 ให้กับความสูง / ความกว้างโดยคำนึงถึงช่องว่างภายใน + ความกว้างของเส้นขอบที่กำหนดใน css var popMargTop = ($ ("#" + popID) ความสูง () + 80) / 2; var popMargLeft = ($ ("#" + popID) ความกว้าง () + 80) / 2; // กำหนดจำนวนการเติม $ ("#" + popID) css (("margin-top": - popMargTop, "margin-left": - popMargLeft)); // เพิ่มพื้นหลังแรเงากึ่งโปร่งใส $ ("เนื้อหา") ต่อท้าย ("
"
)
;
// คอนเทนเนอร์ div จะถูกเขียนก่อน tag.
$ ("# จาง") css (("filter": "alpha (ความทึบ = 80)") จางใน (); // เลเยอร์โปร่งแสง กรอง IE . ที่น่าเบื่อ คืนค่าเท็จ; )); // ปิดหน้าต่างและแรเงาพื้นหลัง $ (เอกสาร). บน ("คลิก", "a.close, #fade", ฟังก์ชัน () ( // ปิดเมื่อคลิกนอกหน้าต่างเช่น ในพื้นหลัง ... $ ("# จาง, .popup_block") fadeOut (ฟังก์ชัน () ($ ("# fade, a.close") ลบ (); //จางหายไป )); คืนค่าเท็จ; )); ));
$ (เอกสาร) .ready (ฟังก์ชัน () (// เมื่อคลิกลิงก์ที่มีคลาสป๊อปไลท์และ href ของแอตทริบิวต์แท็ก c # $ ("a.poplight") คลิก (ฟังก์ชัน () (var popID = $ (นี่) .attr ("rel"); // รับชื่อของหน้าต่าง สิ่งสำคัญคือต้องไม่ลืมเปลี่ยน ชื่อในแอตทริบิวต์ rel ของลิงก์เมื่อเพิ่มใหม่ var popURL = $ (นี้) .attr ("href"); // รับขนาดจากแอตทริบิวต์ href ของลิงก์ // แบบสอบถามและตัวแปรจากข้อความค้นหา href url var = popURL.split ("?"); var dim = query.split ( "&"); var popWidth = dim.split ("="); // ค่าแรกของสตริงการสืบค้น // เพิ่มปุ่มปิดลงใน window $ ("#" + popID) .fadeIn () css (("width": Number (popWidth))) นำหน้า (""); // กำหนดระยะขอบ (ระยะขอบ) สำหรับการจัดตำแหน่งกึ่งกลาง (แนวตั้งและแนวนอน) - เราเพิ่มความสูง / ความกว้าง 80 ด้วยช่องว่างภายใน + ความกว้างของเส้นขอบที่กำหนดไว้ใน css var popMargTop = ($ ("#" + popID) .height () + 80) / 2; var popMargLeft = ($ ("#" + popID ) .width () + 80) / 2; // ตั้งค่าการเยื้อง $ ("# "+ popID) .css ((" margin-top ": -popMargTop" margin-left ": -popMargLeft)); / / เพิ่มพื้นหลังแรเงากึ่งโปร่งใส $ (" body ") ต่อท้าย ("
"); // div container จะถูกเขียนก่อน tag... $ ("# fade") css (("filter": "alpha (opacity = 80)")) fadeIn (); // ความโปร่งแสงของเลเยอร์ ตัวกรองสำหรับ IE ที่น่าเบื่อจะคืนค่าเป็นเท็จ )); // ปิดหน้าต่างและจางพื้นหลัง $ (เอกสาร) .on ("คลิก", "a.close, #fade", ฟังก์ชัน () (// ปิดโดยคลิกนอกหน้าต่าง เช่น บนพื้นหลัง ... $ ( "#fade, .popup_block") fadeOut (ฟังก์ชัน () ($ ("# fade, a.close") ลบ (); // จางหายไป)); return false;)); ));
บทสรุป: โดยทั่วไปแล้ว หากคุณไม่ได้เข้าไปในป่าและไม่โหลดตัวเองด้วยโค้ดที่ไร้สาระ หน้าต่างโมดอลที่ยอดเยี่ยมของเราก็พร้อมทำงาน และกำลังรอให้คุณแปลความคิดของคุณเป็นข้อความหรือข้อมูลที่เป็นประโยชน์อื่น ๆ
ครั้งหน้าฉันจะบอกและแสดงตัวอย่างให้คุณเห็นอย่างแน่นอน และแน่นอนว่าหลายคนคงสนใจที่จะเรียนรู้เกี่ยวกับวัตถุของบุคคลที่สามอื่นๆ ในหน้าต่างป๊อปอัป อย่าหลงทางบนเว็บและคอยติดตาม!
อัปเดต : เวอร์ชัน dm-modal.js v1.3 (15.01.2017) แก้ไขแล้ว : แทนที่ฟังก์ชัน .live () ที่เลิกใช้แล้วโดยใช้ href * = \\ # ไวยากรณ์ ตอนนี้ปลั๊กอินใช้งานได้กับไลบรารี jQuery เวอร์ชันล่าสุด
นั่นคือทั้งหมด! ฉันหวังว่าคุณจะมีบทช่วยสอนที่มีประโยชน์อื่น
ด้วยความเคารพ แอนดรูว์
1. หน้าต่าง Modal บน jQuery "Simple Modal Box"
2. ปลั๊กอิน jQuery "LeanModal"
การแสดงเนื้อหาในรูปแบบโมดอล หากต้องการดูการทำงานของปลั๊กอินในหน้าสาธิต ให้คลิกที่ลิงก์: แบบฟอร์มลงทะเบียนหรือเนื้อหาพื้นฐาน
3. ปลั๊กอิน jQuery "ToastMessage"
ข้อความป๊อปอัป ปลั๊กอินมาในสองรสชาติ ในกรณีหนึ่ง ข้อความจะหายไปเอง หลังจากช่วงเวลาหนึ่ง ในการใช้งานครั้งที่สอง เพื่อปิดข้อความ คุณต้องคลิกที่ปุ่ม
4. เนื้อหาที่ปรากฏขึ้นในหน้าต่างโมดอล
ปลั๊กอิน "เปิดเผย" หากต้องการดูการทำงานของปลั๊กอิน ให้คลิกที่ปุ่ม "Fire A Reveal Modal" บนหน้าสาธิต
5. กล่องโต้ตอบน่ารัก
คลิกที่กากบาทบนหน้าสาธิตเพื่อดูการทำงานของปลั๊กอิน
6. หน้าต่างโมดอล Mootools ปลั๊กอิน "MooDialog"
แถบป๊อปอัป 7.jQuery ที่ด้านบนของหน้าจอ
8.jQuery ป๊อปอัป
ปลั๊กอิน jQuery สำหรับแสดงแบบฟอร์มคำติชมในหน้าต่างป๊อปอัป
10. ปลั๊กอิน MooTools "LightFace" สำหรับติดตั้งกล่องโต้ตอบ Facebook
กล่องโต้ตอบสไตล์ Facebook นอกเหนือจากข้อมูลแบบคงที่, รูปภาพ, เฟรม, คำขอ Ajax ยังสามารถวางใน windows การตั้งค่าปลั๊กอินมากมาย ซึ่งเป็นเครื่องมือที่ทรงพลังมาก มันดูมีสไตล์และใช้งานได้ดีมาก ติดตามลิงก์ในหน้าสาธิตเพื่อดูตัวอย่างเนื้อหาต่างๆ
โมดอล 11.jQuery
กล่องโต้ตอบป๊อปอัป jQuery ที่เรียบร้อย
12. jQuery modals
หน้าต่างโมดอลป๊อปอัปน่ารัก สามสไตล์. หน้าสาธิตมี 3 ลิงก์สำหรับหน้าต่างการโทร
13. jQuery modals
หน้าต่างโมดอลป๊อปอัปหลายประเภท หากต้องการดูการทำงานของปลั๊กอิน ให้คลิกที่ลิงก์ในหน้าสาธิต
15. ข้อความป๊อปอัพบนหน้า
ข้อความจะปรากฏบนหน้า ซึ่งจะจางลง คลิกที่ "คลิกฉัน" ในหน้าสาธิตเพื่อดูข้อความป๊อปอัป การคลิกที่กากบาทจะปิดลง ใช้งานกับ jQuery
16. หน้าต่าง Modal "ModalBox" ใน javascript
การใช้งานกล่องโต้ตอบโมดอลที่ทันสมัยโดยไม่ต้องใช้ป๊อปอัปและการโหลดหน้าซ้ำ ในหน้าสาธิต ให้คลิกที่ปุ่ม "เริ่มการสาธิต" เพื่อดูว่าสคริปต์ทำงานอย่างไร
17. ปลั๊กอิน "Leightbox" โดยใช้ไลบรารี Prototype
ปลั๊กอินสำหรับแสดงเนื้อหาในหน้าต่างโมดอล
บ่อยครั้ง คุณสามารถหาโมดอลได้บนเว็บไซต์ และพวกมันทั้งหมดใช้สำหรับภารกิจที่แตกต่างกัน อันที่จริง มันเป็นเครื่องมือที่ทรงพลังทีเดียวที่ช่วยให้คุณสร้างอินเทอร์เฟซของไซต์แบบโต้ตอบและใช้งานง่ายขึ้น ตัวอย่างเช่น หน้าต่างโมดอลสามารถใช้กับแบบฟอร์มต่างๆ เช่น แบบฟอร์มการอนุญาต แบบฟอร์มคำติชม การสั่งซื้อผลิตภัณฑ์ และคุณไม่มีทางรู้
ในบทความนี้ เราจะมาดูตัวอย่างการสร้างหน้าต่าง Modal Simple โดยใช้ jQuery และ CSS ลักษณะเฉพาะของตัวอย่างนี้คือไม่จำเป็นที่นี่ ยกเว้นไลบรารี jQuery เอง
วางรหัสโมดอลบนหน้า:
ปิด
เปิดหน้าต่างโมดอลดังที่คุณเห็นจากมาร์กอัป บล็อกของหน้าต่างโมดอลนั้นเป็น div ที่มี id = attribute modal_form ซึ่งมีองค์ประกอบช่วงที่มี id = modal_close ... องค์ประกอบนี้จะทำหน้าที่เป็นปุ่มเพื่อปิดหน้าต่างโมดอล นอกจากนี้ ใต้บล็อกจะมี div ที่มีแอตทริบิวต์ id = ซ้อนทับ ซึ่งทำหน้าที่ในเวลาเดียวกันเพื่อทำให้พื้นหลังมืดลง หน้าต่างโมดอลจะเปิดขึ้นโดยการอ้างอิงพร้อมกับคลาส โมดอล .
CSS สำหรับหน้าต่างโมดอล
#modal_form (กว้าง: 300px; สูง: 300px; border-radius: 5px; border: 3px # 000 solid; พื้นหลัง: #fff; ตำแหน่ง: คงที่; ด้านบน: 45%; ซ้าย: 50%; ขอบด้านบน: -150px; margin-left: -150px; display: none; opacity: 0; z-index: 5; padding: 20px 10px;) #modal_form #modal_close (width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; เคอร์เซอร์: ตัวชี้; จอแสดงผล: บล็อก;) #overlay (ดัชนี z: 3; ตำแหน่ง: คงที่; สีพื้นหลัง: # 000; ความทึบ: 0.8; -moz-opacity: 0.8; ตัวกรอง: alpha (ความทึบ = 80) ; ความกว้าง: 100%; ความสูง: 100%; บน: 0; ซ้าย: 0; เคอร์เซอร์: ตัวชี้; จอแสดงผล: ไม่มี;)
สำหรับ modal_form เรากำหนดความกว้างและความสูงคงที่ แล้วจัดตำแหน่งให้อยู่กึ่งกลางของหน้าจอ สำหรับแผ่นรองโมดอล ( ซ้อนทับ ) เรากำหนดขนาดเป็นความกว้างของหน้าจอ เติมด้วยความโปร่งใส และซ่อนไว้ตามค่าเริ่มต้น ช่วงเวลาพิเศษกับ z-index , โมดอลควรมีองค์ประกอบที่ใหญ่ที่สุดของทุกองค์ประกอบในหน้า และหน้าปกควรมีขนาดใหญ่ที่สุดยกเว้นโมดอลเอง
สำหรับพื้นฐานที่สุด นี่คือโค้ดจาวาสคริปต์ สำหรับหน้าต่างโมดอลจะใช้สองเหตุการณ์หลัก นี่คือการเปิด - คลิกที่องค์ประกอบที่มีคลาส โมดอล ในกรณีของเรานี่คือลิงค์ และการปิดหน้าต่างโมดอลเป็นการคลิกที่หน้าปก ( ซ้อนทับ ) หรือคลิกที่ปุ่มปิด ในกรณีของเราคือองค์ประกอบช่วงที่มี id = modal_close .
$ (เอกสาร) .ready (ฟังก์ชัน () ($ (". modal") คลิก (ฟังก์ชัน (เหตุการณ์) (event.preventDefault (); $ ("# overlay") fadeIn (400, // เคลื่อนไหวแสดงหน้าปก function () (// จากนั้นแสดง mod. window $ ("# modal_form") .css ("display", "block") .animate ((ความทึบ: 1, ด้านบน: "50%"), 200);) ); )); // ปิดหน้าต่างโมดอล $ ("# modal_close, #overlay") คลิก (ฟังก์ชัน () ($ ("# modal_form") .animate ((ความทึบ: 0, บนสุด: "45%") , 200, // ฟังก์ชันลดความทึบ () (// หลังจากภาพเคลื่อนไหว $ (นี่) .css ("แสดง", "ไม่มี"); // ซ่อนหน้าต่าง $ ("# โอเวอร์เลย์") fadeOut (400); / / ซ่อนถาด) );));));
ด้วยภาพเคลื่อนไหว เราเปลี่ยนตำแหน่งแนวตั้ง สูงสุด รวมไปถึงความโปร่งใส ความทึบ และด้วยสิ่งนี้ เราจึงได้เอฟเฟกต์ที่น่าสนใจ เอฟเฟกต์ที่คล้ายกันนี้ใช้ทั้งเมื่อเปิดหน้าต่างและเมื่อปิด ความแตกต่างคือลำดับของการใช้คุณสมบัติสำหรับบล็อกจะเปลี่ยนไป ซึ่งทำให้เห็นภาพการเปิดและปิดหน้าต่าง
เป็นไปได้มากว่าคุณเคยเห็นหน้าต่างโมดอลป๊อปอัปบนอินเทอร์เน็ตมากกว่าหนึ่งครั้งแล้ว - การยืนยันการลงทะเบียน คำเตือน ข้อมูลความช่วยเหลือ ดาวน์โหลดไฟล์ และอื่นๆ อีกมากมาย ในบทช่วยสอนนี้ ฉันจะยกตัวอย่างวิธีการสร้างหน้าต่างโมดอลขั้นพื้นฐานที่สุด
วิธีสร้างโมดอลป๊อปอัปอย่างง่าย มาเริ่มตรวจสอบรหัสของหน้าต่างโมดอลที่ง่ายที่สุดที่จะปรากฏขึ้นทันที รหัส jQuery
ร่างกาย หน้าของคุณ ทันทีหลังจากโหลดหน้าโดยไม่มีคำสั่งใด ๆ คุณจะเห็นหน้าต่างที่มีลักษณะดังนี้:
เรียกหน้าต่างโมดอล jQuery โดยอ้างอิงด้วย CSS ขั้นตอนต่อไปคือการสร้าง หน้าต่างโมดอล เมื่อคลิกที่ลิงค์ พื้นหลังจะค่อยๆมืดลง
ก่อนอื่นมาเขียน ส่วน html ... เราวางรหัสนี้ในเนื้อหาของเอกสารของคุณ
เรียกหน้าต่างโมดอล
ข้อความโมดอล
ปิด I
ข้อความในหน้าต่างโมดอล
โค้ด CSS ... ทั้งในไฟล์ css แยกต่างหากหรือใน
ความสนใจ! อย่าลืมรวมไลบรารีไว้ที่ส่วนหัวของเอกสารด้วย!
รหัส JQuery
Modals เป็นส่วนสำคัญของการออกแบบเว็บสมัยใหม่ ด้วยความช่วยเหลือของพวกเขา นักพัฒนาสามารถใช้วิธีการวนซ้ำในหน้าเดียวและไม่ส่งผู้เยี่ยมชมไปยังหน้ารอง ในบทช่วยสอนนี้ เราจะมาดูวิธีสร้างโมดอลพื้นหลังเบลอที่ยอดเยี่ยมสำหรับเว็บไซต์ของคุณโดยใช้ jQuery และ CSS3 ต้องขอบคุณกฎเหล่านี้ เราจะสร้างพื้นหลังเบลอเมื่อมีหน้าต่างปรากฏขึ้น ซึ่งจะผูกมัดสายตาของผู้เยี่ยมชมไว้กับข้อมูลที่จำเป็นบนไซต์เท่านั้น
CSS3 พื้นหลังเบลอ Modals ข่าวเศรษฐกิจที่ดีที่สุดอยู่ที่นี่เท่านั้น: Drobakha
แอนิเมชั่นของหน้าต่างจะถูกตั้งค่าในลักษณะที่เมื่อคุณคลิกที่ปุ่มลักษณะที่ปรากฏ หน้าต่างจะเคลื่อนไหวจากบนลงล่าง ในขณะที่พื้นหลังเบลอจะได้รับการปรับปรุงโดยอัตโนมัติ
ขั้นตอนที่ 1. HTML เราจะมีคอนเทนเนอร์ที่จะประกอบด้วย: ชื่อ คำอธิบาย จากนั้นเราเพิ่มคลาสสำหรับปุ่มที่มีคลาส สลับModal เพื่อเปิดหน้าต่างโมดอล:
หัวเรื่อง
คำอธิบาย
เปิดบทความ
แท็บเป็นสิ่งที่น่าสนใจและสะดวกมากในการสร้างเว็บไซต์ ช่วยให้คุณจัดระเบียบข้อมูลได้อย่างถูกต้อง ในขณะที่ประหยัดพื้นที่เล็กน้อยบนไซต์
จากนั้นเราต้องเพิ่มคลาส modal is-active , คลาสนี้จะรับผิดชอบในการเรียกหน้าต่างโมดอล modal__header รับผิดชอบชื่อเรื่องและสไตล์ของหน้าต่าง
ขั้นตอนที่ 2. CSS ทีนี้มาดูการจัดแต่งทรงผมกันต่อ ขั้นแรกจะเป็นคลาส ปุ่ม, ซึ่งคุณจะต้องรับผิดชอบสำหรับปุ่มบนไซต์เราตั้งค่าพารามิเตอร์การแสดงผลที่ถูกต้องสำหรับมัน:
ปุ่ม (พื้นหลัง: ไม่มี พื้นหลังคลิป: padding-box; display: inline-block; border: 0; user-select: none; -webkit-touch-callout: none; -webkit-appearance: button; -webkit-user -select: none; -moz-user-select: none; -ms-user-select: none;)
คอนเทนเนอร์ (ตำแหน่ง: สัมพันธ์; ระยะขอบ: 0 อัตโนมัติ; ความกว้างสูงสุด: 960px; box-sizing: border-box; padding-top: 40px;)
บทความ (พื้นหลัง: #fff; padding: 20px; margin-bottom: 40px; border-radius: 5px;) .modal (display: none; position: fixed; top: 50%; width: 100%; height: auto; margin -top: -150px; สีพื้นหลัง: $ color-white; border-radius: 3px; z-index: 999; box-shadow: 0px 1px 3px 0px เข้มขึ้น ($ color-bg, 10%); @media # ( $ เล็ก) (ซ้าย: 50%; ระยะขอบซ้าย: -260px; ความกว้างสูงสุด: 520px;) & .is-active (แสดง: บล็อก; ภาพเคลื่อนไหว: สไลด์เชิงเส้น 1 วินาที;) .inner (ตำแหน่ง: สัมพันธ์; ช่องว่างภายใน: 20px ;)) .modal__header (ขอบล่าง: 1px ทำให้เข้มขึ้น ($ color-bg, 5%);) .modal__footer (จัดข้อความ: กึ่งกลาง; ปุ่ม (แสดง: inline-block;))สไตล์ค่อนข้างเรียบง่าย โดยถูกจัดเก็บไว้ในไฟล์แยกต่างหาก และไม่ควรทำให้เกิดปัญหาในการแก้ไขสำหรับนักพัฒนาที่เคยพบ CSS
ขั้นตอนที่ 3 JS สุดท้ายของเรา แต่ไม่มีความสำคัญน้อยกว่าคือการตั้งค่าการเบลอพื้นหลังอัตโนมัติเมื่อเมนูปรากฏขึ้นรวมถึงความสามารถในการคลิกของลิงก์ด้วยกฎเล็ก ๆ นี้จะช่วยเราได้ Js :
$ ("body") addClass ("เป็นภาพเบลอ"); $ (". toggleModal") บน ("คลิก" ฟังก์ชัน (เหตุการณ์) (event.preventDefault (); $ (". modal") toggleClass ("is-active"); $ ("body") toggleClass ("เบลอ");));
ด้วยเหตุนี้ เราจึงได้หน้าต่างโมดอลที่ยอดเยี่ยมซึ่งดึงดูดสายตาของผู้มาเยือนและไม่เกะกะการออกแบบของคุณ
ตัวอย่างของฟังก์ชัน jQuery setTimeout () Javascript ป้องกันไม่ให้ตัวจับเวลาหลายตัวเรียกใช้ setinterval ในเวลาเดียวกัน
DIY วงจรวิทยุสมัครเล่นและผลิตภัณฑ์ทำเอง
ครอบตัดข้อความที่มีความสูงหนึ่งหรือหลายบรรทัดด้วยการเพิ่มจุดไข่ปลา การเพิ่มการไล่ระดับสีให้กับข้อความ