سبد خرید (0)

تبلیغات

آموزش foundation-مودال ها

مودال ها(Modals)

یک مودال(modal) درواقع یک پنجره ی پاپ آپ است که در بالای صفحه ی جاری نمایش می یابد. 

برای ایجاد یک مودال، کلاس reveal-modal. و خصوصیت data-reveal را به یک عنصر ظرف با یک id یکتا اضافه نمایید(مانند <"div id="myModal>). برای اینکه مودال به حالت باز شده در بیاید، از یک عنصر دلخواه با خصوصیت "data-reveal-id="id استفاده کنید. توجه کنید که مقدار id در خصوصیت ذکر شده، باید با id ظرف مورد نظر برابر باشد( بعنوان مثال "myModal" ).

اگر در بیرون از مودال کلیک کنید، پنجره ی مودال بسته خواهد شد. برای بستن مودال توسط یک علامت ضربدر که در گوشه ی بالا و سمت راست نمایش داده می شود، کلاس close-reveal-modal. را به یک عنصر <a> اضافه کنید. 

نکته: به یاد داشته باشید که فایل جاوااسکریپت foundation را مقدار دهی اولیه کنید. 

مثال

<!-- Trigger the Modal -->
<button type="button" class="button" data-reveal-id="myModal">Click To Open Modal</button>

<!-- The Modal Content -->
<div id="myModal" class="reveal-modal" data-reveal>
  <h2>Heading in Modal.</h2>
  <p>Some text in the modal.</p>
  <p>Some text in the modal.</p>
  <a class="close-reveal-modal">&times;</a>
</div>

<!-- Initialize Foundation JS -->
<script>
$(document).ready(function() {
    $(document).foundation();
})
</script>
خودتان امتحان کنید »

اندازه ی مودال

با اضافه کردن کلاس های زیر به ظرف مودل مورد نظر، می توانید اندازه ی مودال را تغییر دهید:

  • .tiny: 30% width
  • .small: 40% width
  • .medium: 60% width
  • .large: 70% width
  • .xlarge: 95% width
  • .full: 100% width AND height

نکته: مقدار پیش فرض در تبلت ها و لپ تاپ ها و رایانه های رومیزی برابر با عرض %80 است و در دستگاه های با اندازه ی صفحه ی کوچک، همواره برابر با عرض %100 است. 

مثال

<div id="myModal" class="reveal-modal tiny|small|medium|large|xlarge|full" data-reveal>
خودتان امتحان کنید »

مودال های تو در تو

شما می توانید با اضافه کردن یک دکمه ی دیگر، درون مودال اولیه، یک مودال را درون یک مودال دیگر قرار دهید. توجه کنید که دکمه ی دوم و مودال جدید، باید دارای id برابر باشند: 

مثال

<!-- Trigger the modal -->
<a href="#" class="button" data-reveal-id="myModal">Click To Open Modal</a>

<!-- The First Modal -->
<div id="myModal" class="reveal-modal" data-reveal>
  <h2>First Modal</h2>
  <p>Some text..</p>
  <p><a href="#" data-reveal-id="secondModal" class="button">Open Second Modal</a></p>
  <a class="close-reveal-modal">&times;</a>
</div>

<!-- The Second Modal -->
<div id="secondModal" class="reveal-modal" data-reveal>
  <h2>Tada! Second Modal</h2>
  <p>Some text..</p>
  <a class="close-reveal-modal">&times;</a>
</div>
خودتان امتحان کنید »

با کلیک بر روی دکمه ی دوم، مودال دوم جایگزین مودال اول می شود. اگر نمی خواهید که به هنگام باز کردن مودال دوم، مودال اول بسته شود، خصوصیت ";data-options="multiple_opened:true را به مودال دوم اضافه کنید:

مثال

<div id="secondModal" class="reveal-modal" data-reveal data-options="multiple_opened:true;">
خودتان امتحان کنید »
تمامی محصولات و خدمات این وبسایت، حسب مورد دارای مجوزهای لازم از مراجع مربوطه می‌باشند و فعالیت‌های این سایت تابع قوانین و مقررات جمهوری اسلامی ایران است.
logo-samandehi مجوز نشر دیجیتال از وزرات فرهنگ و ارشاد اسلامی پرداخت آنلاین -  بانک ملت پرداخت آنلاین - بانک پارسیان پرداخت آنلاین - بانک اقتصاد نوین پرداخت آنلاین - بانک سامان
 
دوره های آموزشی راه اندازی کسب و کارهای اینترنتی
تبلیغات اینترنتی