W3.CSS

W3.CSS หน้าแรก W3.CSS แนะนำ W3.CSS สี คอนเทนเนอร์ W3.CSS แผง W3.CSS เส้นขอบ W3.CSS การ์ด W3.CSS ค่าเริ่มต้นของ W3.CSS แบบอักษร W3.CSS W3.CSS Google W3.CSS Text W3.CSS รอบ W3.CSS แพ็ดดิ้ง W3.CSS Margins จอแสดงผล W3.CSS ปุ่ม W3.CSS W3.CSS หมายเหตุ คำคม W3.CSS การแจ้งเตือน W3.CSS ตาราง W3.CSS รายการ W3.CSS W3.CSS รูปภาพ อินพุต W3.CSS ป้าย W3.CSS แท็ก W3.CSS ไอคอน W3.CSS W3.CSS ตอบสนอง เค้าโครง W3.CSS ภาพเคลื่อนไหว W3.CSS เอฟเฟกต์ W3.CSS W3.CSS บาร์ ดรอปดาวน์ W3.CSS หีบเพลง W3.CSS W3.CSS การนำทาง แถบด้านข้าง W3.CSS แท็บ W3.CSS การแบ่งหน้า W3.CSS แถบความคืบหน้า W3.CSS สไลด์โชว์ W3.CSS W3.CSS โมดอล เคล็ดลับเครื่องมือ W3.CSS W3.CSS กริด รหัส W3.CSS ตัวกรอง W3.CSS W3.CSS Trends กรณี W3.CSS W3.CSS วัสดุ การตรวจสอบ W3.CSS เวอร์ชัน W3.CSS W3.CSS มือถือ

W3.CSS สี

คลาสสี W3.CSS W3.CSS วัสดุสี W3.CSS Color Flat UI W3.CSS Color Metro UI W3.CSS สี Win8 W3.CSS Color iOS W3.CSS แฟชั่นสี ไลบรารีสี W3.CSS W3.CSS แบบแผนสี ธีมสี W3.CSS W3.CSS เครื่องกำเนิดสี

การสร้างเว็บ

แนะนำเว็บ เว็บ HTML เว็บ CSS JavaScript ของเว็บ เค้าโครงเว็บ เว็บแบนด์ เว็บจัดเลี้ยง เว็บร้านอาหาร สถาปนิกเว็บ

ตัวอย่าง

ตัวอย่าง W3.CSS W3.CSS สาธิต เทมเพลต W3.CSS

อ้างอิง

การอ้างอิง W3.CSS ดาวน์โหลด W3.CSS

W3.CSS โมด อล


โมดอลคือกล่องโต้ตอบ/หน้าต่างป๊อปอัปที่แสดงที่ด้านบนของหน้าปัจจุบัน:

×

Modal Header

Hello World!

Go back to W3.CSS Modal to learn more!

Modal Footer Close


W3.CSS Modal Classes

W3.CSS มีคลาสต่อไปนี้สำหรับหน้าต่างโมดอล:

ระดับ กำหนด
w3-modal โมดอลคอนเทนเนอร์
w3-modal-content เนื้อหาที่เป็นกิริยาช่วย

สร้างโมดอล

คลาสw3-modalกำหนดคอนเทนเนอร์สำหรับ modal

คลาสw3-modal-contentกำหนดเนื้อหาที่เป็นกิริยาช่วย

เนื้อหาโมดอลสามารถเป็นองค์ประกอบ HTML ใดก็ได้ (div, หัวเรื่อง, ย่อหน้า, รูปภาพ ฯลฯ)

ตัวอย่าง

<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-button">Open Modal</button>

<!-- The Modal -->
<div id="id01" class="w3-modal">
  <div class="w3-modal-content">
    <div class="w3-container">
      <span onclick="document.getElementById('id01').style.display='none'"
      class="w3-button w3-display-topright">&times;</span>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
    </div>
  </div>
</div>


เปิด Modal

ใช้องค์ประกอบ HTML ใด ๆ เพื่อเปิดโมดอล อย่างไรก็ตาม มักเป็นปุ่มหรือลิงก์

เพิ่ม แอตทริบิวต์ onclickและชี้ไปที่รหัสของโมดอล ( id01ในตัวอย่างของเรา) โดยใช้เมธอด document.getElementById()


ปิด Modal

หากต้องการปิด modal ให้เพิ่ม คลาส ปุ่ม w3ให้กับองค์ประกอบพร้อมกับแอตทริบิวต์ onclick ที่ชี้ไปที่ id ของ modal ( id01 ) คุณยังสามารถปิดได้ด้วยการคลิกภายนอกโมดอล (ดูตัวอย่างด้านล่าง)

เคล็ดลับ: &ครั้ง; เป็นเอนทิตี HTML ที่ต้องการสำหรับไอคอนปิด แทนที่จะเป็นตัวอักษร "x"


ส่วนหัวและส่วนท้ายของโมดอล

ใช้ คลาส w3-containerเพื่อสร้างส่วนต่าง ๆ ภายในเนื้อหาโมดอล:

×

Modal Header

Some text..

Some text..

Modal Footer

ตัวอย่าง

<div id="id01" class="w3-modal">
  <div class="w3-modal-content">

    <header class="w3-container w3-teal">
      <span onclick="document.getElementById('id01').style.display='none'"
      class="w3-button w3-display-topright">&times;</span>
      <h2>Modal Header</h2>
    </header>

    <div class="w3-container">
      <p>Some text..</p>
      <p>Some text..</p>
    </div>

    <footer class="w3-container w3-teal">
      <p>Modal Footer</p>
    </footer>

  </div>
</div>

Modal เป็นการ์ด

หากต้องการแสดงโมดอลเป็นการ์ด ให้เพิ่ม คลาส w3-card-*คลาสใดคลาสหนึ่งลงใน คอนเทนเนอร์ w3-modal-content :

×

Modal Header

Some text..

Some text..

Modal Footer

ตัวอย่าง

<div class="w3-modal-content w3-card-4">

Modals เคลื่อนไหว

ใช้ คลาส w3-animate-zoom|top|bottom|right|left ใด ๆ เพื่อเลื่อนใน modal จากทิศทางเฉพาะ:

×

Modal Header

Some text..

Some text..

Modal Footer

×

Modal Header

Some text..

Some text..

Modal Footer

×

Modal Header

Some text..

Some text..

Modal Footer

×

Modal Header

Some text..

Some text..

Modal Footer

×

Modal Header

Some text..

Some text..

Modal Footer

×

Modal Header

Some text..

Some text..

Modal Footer

×

Modal Header

Some text..

Some text..

Modal Footer

ตัวอย่าง

<div class="w3-modal-content w3-animate-zoom">
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">

คุณยังสามารถจางลงในสีพื้นหลังของโมดอลได้โดยการตั้งค่า คลาส w3-animate-opacityบนองค์ประกอบ w3-modal:

ตัวอย่าง

<div class="w3-modal w3-animate-opacity">

โมดอลอิมเมจ

คลิกที่ภาพเพื่อแสดงเป็นโมดอลในขนาดเต็ม:

นอร์เวย์
×
Norway

ตัวอย่าง

<img src="img_snowtops.jpg" onclick="document.getElementById('modal01').style.display='block'" class="w3-hover-opacity">

<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
  <img class="w3-modal-content" src="img_snowtops.jpg">
</div>

แกลลอรี่รูปภาพ Modal

คลิกที่ภาพเพื่อแสดงขนาดเต็ม:

×

ตัวอย่าง

<div class="w3-row-padding">
  <div class="w3-container w3-third">
    <img src="img_snowtops.jpg" style="width:100%" onclick="onClick(this)">
  </div>
  <div class="w3-container w3-third">
    <img src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
  </div>
  <div class="w3-container w3-third">
    <img src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
  </div>
</div>

<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
  <img class="w3-modal-content" id="img01" style="width:100%">
</div>

<script>
function onClick(element) {
  document.getElementById("img01").src = element.src;
  document.getElementById("modal01").style.display = "block";
}
</script>

แบบฟอร์มเข้าสู่ระบบโมดอล

ตัวอย่างนี้สร้าง modal สำหรับการเข้าสู่ระบบ:


× Avatar
Remember me
Forgot password?

ตัวอย่าง


Modal พร้อมเนื้อหาแบบแท็บ

ตัวอย่างนี้สร้างโมดอลที่มีเนื้อหาแบบแท็บ:

×

Header

London

London is the most populous city in the United Kingdom, with a metropolitan area of over 9 million inhabitants.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

ตัวอย่าง


Close the Modal

In the examples above, we use a button to close the modal. However, with a little bit of JavaScript, you can also close the modal when clicking outside of the modal box:

Example

// Get the modal
var modal = document.getElementById('id01');

// When the user clicks anywhere outside of the modal, close it
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

Advanced: Lightbox (Modal Image Gallery)

This example shows how to add an image slideshow inside a modal, to create a "lightbox":

×

Nature and sunrise

Nature and sunrise
French Alps
Mountains and fjords

Example

Click on an image:

Tip: To learn more about slideshows, visit our W3.CSS Slideshow chapter.