มือถือ jQuery ป๊อป
เป็นที่นิยมมากในป๊อปอัปโต้ตอบป๊อปสามารถวางทับบนหน้าจอแสดงผล
ป๊อปอัพสามารถนำมาใช้เพื่อแสดงข้อความ, รูปภาพ, แผนที่, หรือเนื้อหาอื่น ๆ
สร้างป๊อปและจำเป็นที่จะต้องใช้ <a> <div> เพิ่มคุณสมบัติ = ข้อมูล rel "ป๊อปอัพ" ในองค์ประกอบ <a> <div> เพื่อเพิ่มข้อมูลบทบาท = แอตทริบิวต์ "ป๊อปอัพ" จากนั้นเราระบุรหัสสำหรับ <div> และจากนั้นตั้งค่า href <a> <div> ID ที่ระบุ <div> เนื้อหาคือการแสดงป๊อปเนื้อหา
หมายเหตุ: <div> ป๊อปและคลิก <a> การเชื่อมโยงจะต้องอยู่ในหน้าเดียวกัน
ตัวอย่าง
<div ข้อมูลบทบาท = "ป๊อปอัพ " id = "myPopup">
<p> นี่คือป๊อปง่าย </ p>
</ div>
ลอง»
หากคุณต้องการที่จะเพิ่มช่องว่างภายในสู่ภายนอกและจากป๊อปสามารถเพิ่มหมวดหมู่ "UI-เนื้อหา" ใน <div> ใน:
ปิดป๊อปอัพ
โดยค่าเริ่มต้นคลิกที่ป๊อปนอกพื้นที่หรือกดปุ่ม "Esc" เพื่อปิดป๊อป หากคุณไม่ต้องการที่จะแตะที่บริเวณด้านนอกของป๊อปปิดป๊อปอัพสามารถเพิ่มข้อมูล dismissible = แอตทริบิวต์ "เท็จ" ในการเพิ่ม (ไม่แนะนำ) นอกจากนี้คุณยังสามารถเพิ่มปุ่มปิดบนป๊อปโดยใช้ข้อมูล rel = ปุ่ม "ย้อนกลับ" ในสถานที่และผ่านรูปแบบการควบคุมตำแหน่งของปุ่ม
| ลักษณะ | ตัวอย่าง |
|---|---|
| ปุ่มปิดบนด้านขวา | ความพยายาม |
| ปุ่มปิดด้านซ้าย | ความพยายาม |
| โดยใช้สถานที่ให้บริการข้อมูล dismissible | ความพยายาม |
การวางตำแหน่งป๊อป
โดยค่าเริ่มต้นป๊อบอัพจะปรากฏขึ้นตรงเหนือคลิกองค์ประกอบถ้าคุณจำเป็นต้องควบคุมตำแหน่งของป๊อป, คุณสามารถใช้ข้อมูลตำแหน่งที่จะเชื่อสำหรับการเปิดป๊อปคลิกที่ลิงค์
การควบคุมสถานที่ป๊อปในสามวิธี:
| มูลค่าทรัพย์สิน | ลักษณะ |
|---|---|
| ข้อมูลตำแหน่งไป = "หน้าต่าง" | ป๊อปอัปแสดงอยู่ในศูนย์หน้าต่าง |
| ข้อมูลตำแหน่งไป = "# MyID" | ป๊อปอัปที่แสดงบนองค์ประกอบที่รู้จักกัน #ID |
| ข้อมูลตำแหน่งไป = "ต้นกำเนิด" | ผิดนัด คลิกที่องค์ประกอบการแสดงผลป๊อป |
ตัวอย่าง
<a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo"> id = " สาธิต" </a>
<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin"> กำเนิด </a>
ลอง»
การเปลี่ยนแปลง
โดยค่าเริ่มต้นป๊อปจะไม่มีผลการเปลี่ยนแปลง ถ้าคุณต้องการคุณสามารถเพิ่มผลการเปลี่ยนแปลง (ผ่านข้อมูลการเปลี่ยนแปลง = "ค่า" แอตทริบิวต์ มือถือ jQuery Transition ):
ทุกกรณีผลกระทบการเปลี่ยนแปลง
ลอง»
ทิศทางป๊อปชายแดนเล็ก ๆ
หากคุณจำเป็นต้องเพิ่มทิศทางป๊อปเล็ก ๆ น้อย ๆ ของเส้นขอบคุณสามารถใช้สถานที่ให้บริการข้อมูลลูกศรและระบุค่า "L" (ซ้าย), "T" (TOP), "R" (ด้านขวา) หรือ "B" (ล่าง):
ตัวอย่าง
<div ข้อมูลบทบาท = "ป๊อปอัพ " id = "myPopup" class = "UI-เนื้อหาข้อมูล" ลูกศร = "L">
<p> ทิศทางขอบซ้าย </ p>
</ div>
ลอง»
โต้ตอบป๊อป
คุณสามารถ pop ผลิตเป็นกล่องโต้ตอบมาตรฐาน (หัวและเนื้อหาของเครื่องหมายด้านล่าง):
ตัวอย่าง
<div ข้อมูลบทบาท = "ป๊อปอัพ" id = "myPopupDialog">
<div ข้อมูลบทบาท = "หัว"> <h1> ข้อความส่วนหัว .. </ h1> </ div>
<div ข้อมูลบทบาท = "หลัก" class = "UI-เนื้อหา"> <p> ข้อความบาง .. </ p> <a href="#"> เชื่อมโยง .. </a>
<div ข้อมูลบทบาท = "ส่วนท้าย"> <h1> ที่ด้านล่างของข้อความ .. </ h1> </ div>
</ div>
ลอง»
ภาพป๊อปอัพ
คุณสามารถแสดงภาพใน pop:ตัวอย่าง
<img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = "w3big" style = "width: 200px;"> </a>
<div ข้อมูลบทบาท = "ป๊อปอัพ" id = "myPopup">
<img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" style = "width: 800px; ความสูง: 400px;" alt = "w3big">
</ div>
ลอง»
ปกป๊อปพื้นหลัง
คุณสามารถใช้คุณสมบัติข้อมูลซ้อนทับรูปแบบหลังจากป๊อปเพิ่มสีพื้นหลัง
โดยค่าเริ่มต้นครอบคลุมสีพื้นหลังโปร่งใส โดยใช้ข้อมูลซ้อนทับธีม = "A" เพื่อเพิ่มพื้นหลังสีอ่อนใช้ข้อมูลที่ซ้อนทับธีม = "B" เพิ่มปกสีเข้มพื้นหลัง:
ตัวอย่าง
<div ข้อมูลบทบาท = "ป๊อปอัพ " id = "myPopup" data-ซ้อนทับธีม = "B">
<p> ข้างหลังผมมีพื้นหลังสีดำ </ p>
</ div>
ลอง»
ทั่วไปป๊อบอัพภาพพื้นหลังบ่อยซ้อนทับ:
ตัวอย่าง
<img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" alt = "w3big" style = "width: 200px;"> </a>
<div ข้อมูลบทบาท = "ป๊อปอัพ " id = "myPopup" data-ซ้อนทับธีม = "B">
<img src = "/ wp-content / uploads / 2015/10 / w3big.jpeg" style = "width: 800px; ความสูง: 400px;" alt = "w3big">
</ div>
ลอง»
หมายเหตุ: ในบทต่อไปคุณจะได้เรียนรู้วิธีการใช้รูปแบบป๊อป