%45 تخفیف، با کد Tabestan روی تمام آموزش ها، بمناسبت جشنواره تابستانه بیاموز ...!
زمان باقی مانده (آخرین فرصت ها)
سبد (0)

تبلیغات

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

یک مودال یک جعبه گفتگو (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 بیشتر می آموزیم:

تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت معرفی بیاموز در شبکه سه پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی