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

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

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

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

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

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

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

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

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

مثال

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


<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">×</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">×</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 بیافزایید:

مثال

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

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

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

مثال

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

شما همچنین میتوانید رنگ پس زمینه مودال را توسط افزودن کلاس w3-animate-opacity به عنصر w3-modal ، محو کنید

مثال

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

مودال تصویری

مثال

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

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

مثال

<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";
  }
}

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