آموزش (Modal) در بوت استرپ

بهاره حسنیبهاره حسنی
308 بازدید
modal
[cdb_box_content css=”.vc_custom_1572367013694{background-color: #1e73be !important;}”]

مولفه ی Modal یک پنجره گفتگو ، پنجره ی بازشو است که در بالای صفحه ی جاری نمایش داده میشود.

به این مولفه پنجره ی پاپ آپ یا جعبه ی دیالوگ نیز گفته میشود.

در بوت استرپ کلاس های Modal را بررسی خواهیم کرد.

[/cdb_box_content]

با عرض سلام و وقت بخیر خدمت شما همراهان گرامی سایت پرنیان طرح

در این مبحث با آموزش بخش Modal در بوت استرپ همراه شما عزیزان هستیم.

چگونه یک Modal ایجاد کنیم ؟

مثال زیر نشان میدهد که چگونه یک پاپ آپ یجاد کنیم.

مثال :

[php]

<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#myModal”>
Open modal
</button>

<!– The Modal –>
<div class=”modal” id=”myModal”>
<div class=”modal-dialog”>
<div class=”modal-content”>

<!– Modal Header –>
<div class=”modal-header”>
<h4 class=”modal-title”>Modal Heading</h4>
<button type=”button” class=”close” data-dismiss=”modal”>&times;</button>
</div>

<!– Modal body –>
<div class=”modal-body”>
Modal body..
</div>

<!– Modal footer –>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-danger” data-dismiss=”modal”>Close</button>
</div>

</div>
</div>
</div>

[/php]

پاپ آپ

modal

Add animation :

از کلاس fade. برای ایجاد جلوه ی محو در هنگام باز و بسته کردن پاپ آپ استفاده کنید.

مثال :

[php]

<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#myModal”>
Open modal
</button>

<!– The Modal –>
<div class=”modal fade” id=”myModal”>
<div class=”modal-dialog”>
<div class=”modal-content”>

<!– Modal Header –>
<div class=”modal-header”>
<h4 class=”modal-title”>Modal Heading</h4>
<button type=”button” class=”close” data-dismiss=”modal”>&times;</button>
</div>

<!– Modal body –>
<div class=”modal-body”>
Modal body..
</div>

<!– Modal footer –>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-danger” data-dismiss=”modal”>Close</button>
</div>

</div>
</div>
</div>

[/php]

پنجره ی Modal با کلاس محو :

محو کردن modal

fading modal

Modal Size :

اندازه ی پاپ آپ ها را با افزودن کلاس های modal-sm برای Modal های کوچک ، modal-lg برای Modal های بزرگ و کلاس modal-xl برای Modal های بسیار بزرگ تغییر دهید.

کلاس size را درون عنصر div همراه با کلاس modal-dialog اضافه کنید.

مثال :

Small Modal :

[php]

<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#myModal”>
Open modal
</button>

<!– The Modal –>
<div class=”modal fade” id=”myModal”>
<div class=”modal-dialog modal-sm”>
<div class=”modal-content”>

<!– Modal Header –>
<div class=”modal-header”>
<h4 class=”modal-title”>Modal Heading</h4>
<button type=”button” class=”close” data-dismiss=”modal”>&times;</button>
</div>

<!– Modal body –>
<div class=”modal-body”>
Modal body..
</div>

<!– Modal footer –>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>
</div>

</div>
</div>
</div>

[/php]

تصویر modal با سایز کوچک :

modal کوچک

small modal

Centered Modal :

پاپ آپ را به صورت عمودی و افقی در وسط صفحه قرار دهید با استفاده از کلاس modal-dialog-centered.

مثال :

[php]

<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#myModal”>
Open modal
</button>

<!– The Modal –>
<div class=”modal fade” id=”myModal”>
<div class=”modal-dialog modal-dialog-centered”>
<div class=”modal-content”>

<!– Modal Header –>
<div class=”modal-header”>
<h4 class=”modal-title”>Modal Heading</h4>
<button type=”button” class=”close” data-dismiss=”modal”>&times;</button>
</div>

<!– Modal body –>
<div class=”modal-body”>
Modal body..
</div>

<!– Modal footer –>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>Close</button>
</div>

</div>
</div>
</div>

[/php]

تصویر مثال بالا :

modal در وسط صفحه

centered modal

Scrolling Modal :

هنگامی که تعداد زیادی محتوا را داخل Modal دارید یک scrollbar به صفحه اضافه میشود.

برای درک آن مثال های زیر را مشاهده کنید.

مثال :

[php]

<button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#myModal”>
Open modal
</button>

<!– The Modal –>
<div class=”modal” id=”myModal”>
<div class=”modal-dialog modal-dialog-scrollable”>
<div class=”modal-content”>

<!– Modal Header –>
<div class=”modal-header”>
<h1 class=”modal-title”>Modal Heading</h1>
<button type=”button” class=”close” data-dismiss=”modal”>×</button>
</div>

<!– Modal body –>
<div class=”modal-body”>
<h3>Some text to enable scrolling..</h3>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>

<p>Some text to enable scrolling.. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</div>

<!– Modal footer –>
<div class=”modal-footer”>
<button type=”button” class=”btn btn-danger” data-dismiss=”modal”>Close</button>
</div>

</div>
</div>
</div>

[/php]

تصویر scrollbar در Modal :

اسکرول در modal

modal scrollbar

دسته بندی آموزش bootstrap
اشتراک گذاری

نوشته های مرتبط

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

23+ محصولات
405+ سفارشات تکمیل شده
2098+ کاربران
399+ مطالب وبلاگ
سبد خرید

هیچ محصولی در سبد خرید نیست.

ورود به سایت