نمایش پاپ آپ واکنشگرا

چاپ

یک مودال یک جعبه گفتگو (dialog box)یا پنجره پاپ آپ  است که در بالای صفحه ی جاری نمایش داده می شود:


کلاسهای مودال در W3.CSS

W3.CSS  برای پنجره های مودال ،کلاس های زیر را فراهم کرده است:

کلاس تعریف
w3-modal  container مودال
w3-modal-content محتوای مودال

ایجاد یک مودال

کلاس  w3-modal یک container برای مودال ایجاد میکند:

کلاس  w3-modal-content محتوای مودال را تعریف میکند.

محتوای مودال میتواند هرکدام از عناصر HTML باشد.(div ها, پاراگرافها ،سربرگ ها و تصاویر و غیره.)

مثال

<!-- Trigger/Open the Modal -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn">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-closebtn">&times;</span>
      <p>Some text in the Modal..</p>
      <p>Some text in the Modal..</p>
    </div>
  </div>
</div>
خودتان امتحان کنيد »

باز کردن مودال

 از هرکدام از عناصر HTML برای باز کردن مودال ها، استفاده میشود.اگرچه ،اغلب یک دکمه یا لینک استفاده میشود.

خصوصیت onclick را بیفزایید و به id مودال اشاره کنید.(درمثال ما id01)،و از تابع  document.getElementById استفاده کنید:


بستن یک مودال

برای بستن مودال ،کلاس  w3-closebtn را با خصوصیت onclick که به id   مودال اشاره می کند ،به یک عنصر بیافزایید.شما همچنین میتوانید با کلیک کردن بیرون مودال ، آن را ببندید.(مثال زیر را ببینید.)

نکته :برای آیکون بستن بهتر است به جای حرف X  از موجودیت &times استفاده کنید.


سربرگ و پاصفحه مودال

کلاس های  w3-container برای ایجاد قسمتهای مختلف درون محتوای مودال استفاده می شوند:

مثال

<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-closebtn">&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>
خودتان امتحان کنيد »

مودال مانند یک کارت

برای نمایش مودال مانند یک کارت، کلاسهای  *-w3-card را به نگه دارنده ی w3-modal-content بیافزایید:

مثال

<div class="w3-modal-content w3-card-8">
خودتان امتحان کنيد »

مودال های متحرک سازی شده

از هرکدام از کلاس های w3-animate-zoom|top|bottom|right|left برای حرکت کشویی مودال از جهت مشخص استفاده کنید:

مثال

<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">
خودتان امتحان کنيد »

مودال تصویری

مثال

<img src="/img_fjords.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_fjords.jpg">
</div>
خودتان امتحان کنيد »

گالری تصاویر مودال

مثال

<div class="w3-row-padding">
  <div class="w3-container w3-third">
    <img src="/img_fjords.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>
خودتان امتحان کنيد »

مودال فرم ورودی

این مثال  ،یک مودال برای فرم ورود ،ایجاد می کند:

مثال

خودتان امتحان کنيد »

مودال با محتوای تب

این مثال ، یک مودال با محتوای تب ایجاد میکند:

مثال

خودتان امتحان کنيد »

بستن مودال

درمثال بالا ،ما از  یک دکمه برای بستن مودال استفاده میکنیم. اگرچه با مقدار کمی جاوااسکریپت ،شما میتوانید زمانی که بیرون جعبه مودال کلیک کردید، مودال را ببندید:

مثال

// 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";
  }
}
خودتان امتحان کنيد »

پیشرفته :  جعبه روشن (Modal Image Gallery)

این مثال چگونگی افزودن یک اسلایدشو تصویری درون مودال را برای ایجاد " جعبه روشن" نشان میدهد:

مثال

روی تصویر کلیک کنید
خودتان امتحان کنيد »

نکته : در مورد اسلایدشو در فصل W3.CSS Slideshow بیشتر می آموزیم: