یکی دیگر از اجزای تعاملی Twitter Bootstrapصفحات modal هستند. صفحات modal بر روی صفحه جاری ظاهر شده و کنترل آن‌را در دست می‌گیرند و تا زمانیکه این صفحه ویژه بسته نشود، امکان استفاده از صفحه زیرین، وجود نخواهد داشت. برای استفاده از این امکان ویژه، ابتدا باید یک لینک یا دکمه‌ای، جهت فراخوانی اسکریپت‌های صفحات modal در صفحه تدارک دیده شود.
برای طراحی یک صفحه modal چهار div باید اضافه شوند. بیرونی‌ترین div باید دارای کلاس modal مجموعه Bootstrap باشد. می‌توان به کلاس modal در اینجا کلاس‌های hide fade را هم برای نمونه اضافه کرد. در این حالت، نمایش و بسته شدن صفحه modal به همراه پویانمایی ویژه‌ای خواهد بود.
داخل این div، سه div با کلاس‌های modal-header برای نمایش هدر، modal-body برای نمایش محتوایی در این صفحه modal و modal-footer برای تدارک محتوای footer این صفحه، قرار خواهند گرفت.
در این بین هر لینکی با ویژگی data-dismiss=modal، سبب بسته شدن خودکار صفحه باز شده خواهد شد.
افزونه bootstrapModalConfirm
اگر نکات یاد شده را بخواهیم کپسوله کنیم، می‌توان یک افزونه جدید جی‌کوئری را با نام فایل jquery.bootstrap-modal-confirm.js برای این منظور تدارک دید:
در اینجا به صورت پویا div یک صفحه modal ایجاد و دو دکمه تائید و لغو به همراه نمایش یک هدر و همچنین محتوایی به کاربر به صفحه اضافه می‌شود. سپس افزونه modal در حالت show، روی این div فراخوانی می‌گردد. در اینجا اگر کاربر بر روی دکمه تائید کلیک کرد، یک callback به نام onConfirm فراخوانی می‌گردد.
مثالی از استفاده از افزونه bootstrapModalConfirm
در مثال فوق، اگر کاربر بر روی لینک حذف رکورد، که به صورت یک دکمه مزین شده است کلیک کند، در صورت تائید، قسمت onConfirm اجرا خواهد شد.
برای طراحی یک صفحه modal چهار div باید اضافه شوند. بیرونی‌ترین div باید دارای کلاس modal مجموعه Bootstrap باشد. می‌توان به کلاس modal در اینجا کلاس‌های hide fade را هم برای نمونه اضافه کرد. در این حالت، نمایش و بسته شدن صفحه modal به همراه پویانمایی ویژه‌ای خواهد بود.
داخل این div، سه div با کلاس‌های modal-header برای نمایش هدر، modal-body برای نمایش محتوایی در این صفحه modal و modal-footer برای تدارک محتوای footer این صفحه، قرار خواهند گرفت.
در این بین هر لینکی با ویژگی data-dismiss=modal، سبب بسته شدن خودکار صفحه باز شده خواهد شد.
افزونه bootstrapModalConfirm
اگر نکات یاد شده را بخواهیم کپسوله کنیم، می‌توان یک افزونه جدید جی‌کوئری را با نام فایل jquery.bootstrap-modal-confirm.js برای این منظور تدارک دید:
// <![CDATA[
(function ($) {
$.bootstrapModalConfirm = function (options) {
var defaults = {
caption: 'تائید عملیات',
body: 'آیا عملیات درخواستی اجرا شود؟',
onConfirm: null,
confirmText: 'تائید',
closeText: 'انصراف'
};
var options = $.extend(defaults, options);
var confirmContainer = "#confirmContainer";
var html = '<div class="modal hide fade" id="confirmContainer">' +
'<div class="modal-header">' +
'<a class="close" data-dismiss="modal">×</a>'
+ '<h5>' + options.caption + '</h5></div>' +
'<div class="modal-body">'
+ options.body + '</div>' +
'<div class="modal-footer">'
+ '<a href="#" class="btn btn-success" id="confirmBtn">' + options.confirmText + '</a>'
+ '<a href="#" class="btn" data-dismiss="modal">' + options.closeText + '</a></div></div>';
$(confirmContainer).remove();
$(html).appendTo('body');
$(confirmContainer).modal('show');
$('#confirmBtn', confirmContainer).click(function () {
if (options.onConfirm)
options.onConfirm();
$(confirmContainer).modal('hide');
});
};
})(jQuery);
// ]]>مثالی از استفاده از افزونه bootstrapModalConfirm
@{
ViewBag.Title = "Index";
}<h2>
Index</h2><a href="#" class="btn btn-danger" id="deleteBtn">حذف رکورد</a>
@section JavaScript
{
<script type="text/javascript">
$(function () {
$("#deleteBtn").click(function (e) {
e.preventDefault(); //می‌خواهیم لینک به صورت معمول عمل نکند
$.bootstrapModalConfirm({
caption: 'تائید عملیات',
body: 'آیا عملیات درخواستی اجرا شود؟',
onConfirm: function () {
alert('در حال انجام عملیات');
},
confirmText: 'تائید',
closeText: 'انصراف'
});
});
});
</script>
}
