กล่องกิริยามูลนิธิ
Modal กล่องจะปรากฏในส่วนหัวของหน้าป๊อปอัพ
เราสามารถจะอยู่ในองค์ประกอบภาชนะ (เช่น <div id="myModal" ) ใช้ ID ที่ไม่ซ้ำกันและเพิ่ม .reveal-modal ชั้นเรียนและ data-reveal แอตทริบิวต์เพิ่มกล่องกิริยา เราสามารถใช้ในองค์ประกอบใดมี data-reveal-id=" id " " แอตทริบิวต์อาลีเปิดกล่องกิริยา ID ID จะต้องสอดคล้องกับภาชนะ (ตัวอย่าง "myModal")
หากคุณต้องการคลิกบนพื้นที่นอกเขตโทษปิดกล่องคำกริยาคำกริยา คุณสามารถปิดกล่องปุ่มกิริยา <a> เพิ่มป้ายชื่อ .close-reveal-modal ระดับ
หมายเหตุ: เลื่อนต้องการ JavaScript ดังนั้นคุณต้องเริ่มต้น JS oundation:
ตัวอย่าง
<ชนิดปุ่ม = "ปุ่ม" ชั้น = "ปุ่ม" data-เปิดเผย-id = "myModal"> คลิกเพื่อเปิด Modal <ปุ่มเปิด />
<! - เนื้อหา Modal ->
<div id = "myModal" ชั้น = "เผยให้เห็นกิริยา" data-เปิดเผย>
<h2> มุ่งหน้าไปใน Modal. < / h2>
<p> ข้อความบางอย่างในกิริยา . </ p>
<p> ข้อความบางอย่างในกิริยา . </ p>
ระดับ <A = "close-reveal -modal"> & ครั้ง; </ a>
</ div>
<! - เตรียมมูลนิธิ JS ->
<script>
$ (เอกสาร) .ready (ฟังก์ชั่น () {
$ (เอกสาร) .foundation ();
})
</ script>
ลอง»
ขนาดของกล่อง Modal
คุณสามารถเพิ่มการเรียนต่อไปนี้ในภาชนะบรรจุกล่องกิริยาในการกำหนดขนาดของกล่องกิริยา:
-
.tiny: กว้าง 30% -
.small: 40% ความกว้าง -
.medium: 60% ความกว้าง -
.large: กว้าง 70% -
.xlarge: กว้าง 95% -
.full: กว้าง 100% และความสูง
หมายเหตุ: การเริ่มต้นในแท็บเล็ต, โน๊ตบุ๊ค, คอมพิวเตอร์ PC เป็น 80% ของความกว้างบนหน้าจอขนาดเล็กที่มีความกว้าง 100%
ตัวอย่าง
ลอง»
กล่องกิริยาสมองกลฝังตัว
คุณสามารถฝังกล่องคำกริยาในกล่องกิริยาคุณสามารถเพิ่มปุ่มทริกเกอร์ใหม่ในกล่องแรกกิริยา คุณต้องตั้งรหัสเฉพาะสำหรับฝังกล่องคำกริยา:
ตัวอย่าง
<A href = "#" class = "button" data-reveal-id = "myModal"> คลิกเพื่อเปิด Modal </ a>
<! - The First Modal ->
<div id = "myModal" ชั้น = "เผยให้เห็นกิริยา" data-เปิดเผย>
<h2> Modal แรก </ H2 >
<p> ข้อความบาง .. </ p>
<p> <a href = "#" data-reveal-id = "secondModal" class = "button"> เปิดสอง Modal </ a> </ p>
ระดับ <A = "close-reveal -modal"> & ครั้ง; </ a>
</ div>
<! - สอง Modal ->
<div id = "secondModal" ชั้น = "เผยให้เห็นกิริยา" data-เปิดเผย>
<h2> Tada! สอง Modal < / h2>
<p> ข้อความบาง .. </ p>
ระดับ <A = "close-reveal -modal"> & ครั้ง; </ a>
</ div>
ลอง»
ที่สองกล่องกิริยาจะเข้ามาแทนที่กล่องแรกกิริยา หากคุณต้องการที่จะเปิดกล่องกิริยาที่สองโดยไม่ต้องปิดกล่องแรกกิริยา คุณสามารถเพิ่มที่สองกล่องกิริยา data-options="multiple_opened:true;" ;" คุณสมบัติ:
ตัวอย่าง
ลอง»