پرنیان طرح | انجام امور پرداختی و مجازی | فایل های گرافیکی | پرداخت های بین المللی
نویسنده: بهاره حسنی 
مولفه ی Modal یک پنجره گفتگو ، پنجره ی بازشو است که در بالای صفحه ی جاری نمایش داده میشود.
به این مولفه پنجره ی پاپ آپ یا جعبه ی دیالوگ نیز گفته میشود.
در بوت استرپ کلاس های Modal را بررسی خواهیم کرد.
با عرض سلام و وقت بخیر خدمت شما همراهان گرامی سایت پرنیان طرح
در این مبحث با آموزش بخش 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”>×</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]
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”>×</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 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”>×</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 :
پاپ آپ را به صورت عمودی و افقی در وسط صفحه قرار دهید با استفاده از کلاس 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”>×</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]
تصویر مثال بالا :
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 :
