در مورد صفحات مودال بوت استرپ 2، مطالب ذیل، در سایت جاری پیشتر مطرح شدهاند:
-
استفاده از modal dialogs مجموعه Twitter Bootstrap برای گرفتن تائید از کاربر
-
نمایش فرمهای مودال Ajax ایی در ASP.NET MVC به کمک Twitter Bootstrap
این کدها نیاز به اندکی تغییر دارند تا با سیستم بوت استرپ 3 سازگار شوند.
ارتقاء کدهای صفحات مودال بوت استرپ 2 به 3
- اگر پیشتر به کلاس modal، کلاس hide را نیز اضافه میکردید، اکنون دیگر نیازی نیست؛ زیرا hide بودن به صورت پیش فرض اعمال میشود (بودن آن هم سبب میشود تا یک صفحه خاکستری نمایش داده شود؛ اما از صفحه مودال خبری نباشد).
- کلاسهای modal-header، modal-body و modal-footer بوت استرپ 2، باید داخل یک div با کلاس modal-content محصور شوند.
- کلاس modal-content باید داخل کلاس modal-dialog محصور شود.
یک مثال:
<div class="container">
<h4 class="alert alert-info">
فرمهای مودال بوت استرپ 3</h4>
<div class="row">
<a data-toggle="modal" href="#myModal" class="btn btn-primary">نمایش صفحه مودال</a>
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
×</button>
<h4 class="modal-title">
عنوان</h4>
</div>
<div class="modal-body">
محتوای صفحه در اینجا
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn">بستن</a> <a href="#" class="btn btn-primary">
ذخیره سازی تغییرات</a>
</div>
</div>
</div>
</div>
</div>
<!-- end row -->
</div>
<!-- /container -->
در این مثال، سلسله مراتب کلاسهای modal ایی که باید تعریف شوند را ملاحظه میکنید. همچنین لینکی با ویژگی data-toggle مساوی modal سبب نمایش این قسمت مخفی از صفحه، به صورت مودال خواهد شد.
در مثالهایی که با بوت استرپ 2 مشاهده کردید (در مقدمه بحث جاری)، این محتوای مخفی به صورت پویا با جاوا اسکریپت به body صفحه اضافه میشود.
بارگذاری یک صفحه مودال Ajax ایی در بوت استرپ سه میتوان با استفاده از خاصیت remote تنظیمات نمایش یک صفحه مودال، به صورت خودکار اینگونه صفحات را بارگذاری کرد:
$('#myModal').modal({
show: true,
remote: '/myNestedContent'
});
و یا حتی اینکار بدون نیاز به کدنویسی جاوا اسکریپتی و با تنظیم ویژگیهای data- مانند مثال ذیل نیز قابل انجام است:
<a data-toggle="modal" class="btn btn-primary" href="@renderModalPartialViewUrl" data-target="#myModal">Click me</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog"></div>
البته بدیهی است در این حالت اطلاعات از طریق HttpGet به صورت خودکار دریافت میشوند. ضمنا مباحث اعتبارسنجی و غیره هم در این حالت به درستی کار نخواهند کرد. بنابراین بهتر است از افزونه مثال انتهای بحث در حالتهای پیشرفتهتر استفاده شود. صرفا برای کاربردهای معمولی نمایش اطلاعات خواندنی، قابلیت ریموت توکار جالب است.
نکته مهم: در حالت ریموت، طراحی محتوایی که باید نمایش داده شود، نباید شامل سطر ذیل باشد. در غیراینصورت اطلاعاتی نمایش داده نخواهد شد:
<div class="modal" id="myModal">
از این جهت که این سطر با آی دی myModal پیشتر به صفحه اضافه شدهاست و تکرار آن سبب محو محتوای جدید میشود.
به روز رسانی مثالهای ASP.NET MVC جهت سازگاری با بوت استرپ 3
مثال فوق را به همراه کدهای اصلاح شده دو مثال ابتدای بحث (jquery.bootstrap-modal-ajax-form.js و jquery.bootstrap-modal-confirm.js)، از لینک ذیل میتوانید دریافت کنید. این مثال به همراه قالب t4 افزودن Viewهای مودال بوت استرپ (CreateBootstrap3ModalForm.tt) نیز هست.
bs3-sample06.zip