وحید نصیری وحید نصیری
استفاده از modal dialogs مجموعه Twitter Bootstrap برای گرفتن تائید از کاربر
اندازه‌ی قلم متن
تخمین مدت زمان مطالعه‌ی مطلب: دو دقیقه
یکی دیگر از اجزای تعاملی 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 برای این منظور تدارک دید:
// <![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">&times;</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);
// ]]>
در اینجا به صورت پویا div یک صفحه modal ایجاد و دو دکمه تائید و لغو به همراه نمایش یک هدر و همچنین محتوایی به کاربر به صفحه اضافه می‌شود. سپس افزونه modal در حالت show، روی این div فراخوانی می‌گردد. در اینجا اگر کاربر بر روی دکمه تائید کلیک کرد، یک callback به نام onConfirm فراخوانی می‌گردد.


مثالی از استفاده از افزونه 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>
}
در مثال فوق، اگر کاربر بر روی لینک حذف رکورد، که به صورت یک دکمه مزین شده است کلیک کند، در صورت تائید، قسمت onConfirm اجرا خواهد شد.


‫۱۱ سال و ۴ ماه قبل، پنجشنبه ۲۳ خرداد ۱۳۹۲، ساعت ۱۲:۳۰
۵۸۷۴
۸
MVCTwitter Bootstrap
مطالب مشابه
  • #
    کیارش سلیمان زاده کیارش سلیمان زاده
    ‫۱۱ سال و ۴ ماه قبل، شنبه ۲۵ خرداد ۱۳۹۲، ساعت ۰۴:۲۵
    البته به نظر من ، راه بهتر برای اینکار استفاده از افرونه bootbox هستش.
  • #
    محمدرضا2 محمدرضا2
    ‫۱۰ سال و ۱ ماه قبل، یکشنبه ۲ شهریور ۱۳۹۳، ساعت ۲۰:۲۶
    سلام.
    چطور می‌توان سایز Modal را Dynamic و بر اساس محتوا تنظیم کرد.
    مثلا در یک گالری تصاوی، عکسها میتوانند در سایزهای مختلف در سایت نمایش داده شوند؟
    • #
      وحید نصیری وحید نصیری
      ‫۱۰ سال و ۱ ماه قبل، یکشنبه ۲ شهریور ۱۳۹۳، ساعت ۲۳:۱۴
      نیاز به یک سری تغییرات در CSS و JS دارد:
      .modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

/* irrelevant styling */
body { text-align: center; }
body p { 
  max-width: 400px; 
  margin: 20px auto; 
}
#tallModal .modal-body p { margin-bottom: 900px }

      // when .modal-wide opened, set content-body height based on browser 
// height; 200 is appx height of modal padding, modal title and button bar

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});
      مثال قابل اجرا
      + یک مثال دیگر: ^
  • #
    مهدی ملائیان مهدی ملائیان
    ‫۷ سال و ۷ ماه قبل، سه‌شنبه ۳ اسفند ۱۳۹۵، ساعت ۲۲:۵۰
    باتشکر.کلیه مراحل فوق انجام شد.جهت معرفی فایل JS ساخته شده از روش آموزشی در بخش اول استفاده شد :
        @BundleConfig.AddStyles("~/Content/css",
                            "~/Content/bootstrap.min.css",
                            "~/Content/Site.css")
    @BundleConfig.AddScripts("~/Scripts/js",
    "~/Scripts/jquery-1.10.2.min.js",
                            "~/Scripts/bootstrap.min.js",
                            "~/Scripts/modernizr-2.6.2.js",
                            "~/Scripts/jquery.bootstrap-modal-confirm.js")
    @RenderSection("JavaScript", required: false)
    و همچنین کد‌های View طبق مطلب جاری استفاده شده.ولی با کلیک بر روی دکمه حذف صفحه به شکل زیر نمایش داده میشود و فرم مدال نمایش داده نمی‌شود.لطفا راهنمائی کنید.