آموزش foundation-مودال ها
مودال ها(Modals)
یک مودال(modal) درواقع یک پنجره ی پاپ آپ است که در بالای صفحه ی جاری نمایش می یابد.
برای ایجاد یک مودال، کلاس reveal-modal. و خصوصیت data-reveal را به یک عنصر ظرف با یک id یکتا اضافه نمایید(مانند <"div id="myModal>). برای اینکه مودال به حالت باز شده در بیاید، از یک عنصر دلخواه با خصوصیت "data-reveal-id="id استفاده کنید. توجه کنید که مقدار id در خصوصیت ذکر شده، باید با id ظرف مورد نظر برابر باشد( بعنوان مثال "myModal" ).
اگر در بیرون از مودال کلیک کنید، پنجره ی مودال بسته خواهد شد. برای بستن مودال توسط یک علامت ضربدر که در گوشه ی بالا و سمت راست نمایش داده می شود، کلاس close-reveal-modal. را به یک عنصر <a> اضافه کنید.
نکته: به یاد داشته باشید که فایل جاوااسکریپت foundation را مقدار دهی اولیه کنید.
مثال
<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">×</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 است.
مثال
مودال های تو در تو
شما می توانید با اضافه کردن یک دکمه ی دیگر، درون مودال اولیه، یک مودال را درون یک مودال دیگر قرار دهید. توجه کنید که دکمه ی دوم و مودال جدید، باید دارای id برابر باشند:
مثال
<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">×</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">×</a>
</div>
با کلیک بر روی دکمه ی دوم، مودال دوم جایگزین مودال اول می شود. اگر نمی خواهید که به هنگام باز کردن مودال دوم، مودال اول بسته شود، خصوصیت ";data-options="multiple_opened:true را به مودال دوم اضافه کنید:
مثال
- نوشته شده توسط احسان عباسی
- بازدید: 3610
