صفحات مودال در بوت استرپ 3

در مورد صفحات مودال بوت استرپ 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

‫۱۰ سال و ۱۱ ماه قبل، پنجشنبه ۲ آبان ۱۳۹۲، ساعت ۱۸:۳۰

۵۶۲۷

۱۶

مطالب مشابه

دوره‌ها ارتقاء به Bootstrap 3

مسیرراه‌ها Twitter Bootstrap

مطالب نمایش فرم‌های مودال Ajax ایی در ASP.NET MVC به کمک Twitter Bootstrap

مطالب دوره‌ها اجزای جاوا اسکریپتی بوت استرپ 3

مطالب دوره‌ها تغییرات صورت گرفته در المان‌های تایپوگرافی و شیوه‌ نامه‌های بوت استرپ 3

مطالب دوره‌ها نگاهی به اجزای سیستم راهبری بوت استرپ 3

مطالب دوره‌ها بررسی سیستم جدید گرید بوت استرپ 3

مطالب دوره‌ها کار با فرم‌ها در بوت استرپ 3

مطالب دوره‌ها بوت استرپ (نگارش 3) چیست؟

نظرات مطالب PersianDatePicker یک DatePicker شمسی به زبان JavaScript که از تاریخ سرور استفاده می‌کند

#

هومن

‫۱۰ سال و ۷ ماه قبل، جمعه ۲۳ اسفند ۱۳۹۲، ساعت ۲۲:۵۰

سلام
از مودال بوت استرپ 3 استفاده کردم اما متاسفانه اعتبار سنج‌ها از کار افتادن ، دلیل بروز این مشکل چیه؟ و چجوری میشه حلش کرد؟ متشکر
- #
  
  وحید نصیری
  
  ‫۱۰ سال و ۷ ماه قبل، جمعه ۲۳ اسفند ۱۳۹۲، ساعت ۲۳:۰۹
  
  مثال انتهای بحث را دریافت کردید؟ چون مباحث اعتبارسنجی در فایل jquery.bootstrap-modal-ajax-form.js آن لحاظ شده. خواص مدل کدهای MVC آن هم برای نمونه دارای ویژگی Required هستند.
  - #
    
    هومن
    
    ‫۱۰ سال و ۷ ماه قبل، جمعه ۲۳ اسفند ۱۳۹۲، ساعت ۲۳:۱۷
    
    دریافت کردم ، مانند مثال شما عمل کرده بودم... اما از این فایل js شما استفاده نکردم از خود بوت استرپ استفاده کردم.اینجور که متوجه شدم این باگ بوت استرپ هست و در این فایل js شما این مشکل رو حل کردید؟
    - #
      
      وحید نصیری
      
      ‫۱۰ سال و ۷ ماه قبل، جمعه ۲۳ اسفند ۱۳۹۲، ساعت ۲۳:۲۴
      
      باگ نیست. کدهای jQuery validator در بوت استرپ لحاظ نشدن. در کدهای افزونه‌ای که نامبرده شد (jquery.bootstrap-modal-ajax-form.js) این فعال سازی صورت گرفته. به متدهای enableBootstrapStyleValidation و فراخوانی‌های validator.unobtrusive در کدهای آن دقت کنید.
      مثال MVC آن کامل هست (پیوست شده در انتهای بحث در پوشه‌ی mvc-sample آن). شامل فایل‌های js، css و مدل و کنترلر، به همراه Viewها و layout آن که تعاریف لازم در آن هست و فایل‌های Viewهای Home که نحوه‌ی استفاده از آن ذکر شده‌اند.
      - #
        
        هومن
        
        ‫۱۰ سال و ۷ ماه قبل، جمعه ۲۳ اسفند ۱۳۹۲، ساعت ۲۳:۳۷
        
        از پاسختون ممنون.
        سوال آخر این که ، برای استفاده از این افزونه فقط کافیه که به پروژه خودم add کنم و در _layout هم لودش کنم؟ یا کار دیگه ای هم باید بکنم؟
        
        #
        
        وحید نصیری
        
        ‫۱۰ سال و ۷ ماه قبل، جمعه ۲۳ اسفند ۱۳۹۲، ساعت ۲۳:۵۶
        
        مثال MVC آن کامل هست (پیوست شده در انتهای بحث در پوشه‌ی mvc-sample آن). شامل فایل‌های js، css و مدل و کنترلر، به همراه Viewها و layout آن که تعاریف لازم در آن هست و فایل‌های Viewهای Home که نحوه‌ی استفاده از آن ذکر شده‌اند.
        
        #
        
        هومن
        
        ‫۱۰ سال و ۷ ماه قبل، شنبه ۲۴ اسفند ۱۳۹۲، ساعت ۰۲:۱۲
        
        سلام آقای نصیری
        من همه مراحل رو با دقت و بدرستی انجام دادم...
        
        اما هیچ مودالی باز نمیشه با ، هر دو فایل جاوا اسکریپت هم فراخوان کردم در layout...
        
        با فایرباگ که برسی کردم دیدم این پیغام خطارو میده
        
        TypeError: $.validator is undefined
        
        مشکل از کجا میتونه باشه؟
        
        #
        
        وحید نصیری
        
        ‫۱۰ سال و ۷ ماه قبل، شنبه ۲۴ اسفند ۱۳۹۲، ساعت ۰۲:۱۸
        
        فایل layout مثال پیوست شده را بررسی کنید. در آن لیست اسکریپت‌های مورد نیاز و همچنین ترتیب دقیق آ‌ن‌ها ذکر شده. برای مثال اول باید jQuery باشد و بعد اسکریپت jquery.validate و الی آخر. فایل‌های مربوطه هم در پوشه‌ی Scripts پروژه پیوست شده موجود است.
        
        #
        
        هومن
        
        ‫۱۰ سال و ۷ ماه قبل، شنبه ۲۴ اسفند ۱۳۹۲، ساعت ۰۲:۳۱
        
        فکر نمیکنم اشکال از layout باشه چون پروژه که داشته کارشو میکرده من فقط دو تا جاوا اسکریپت دیگه به آخرش اضافه کردم ، این layout منه :
        
        . . . <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title> .... </title> @Styles.Render("~/Content/css") @Scripts.Render("~/bundles/modernizr")  @Scripts.Render("~/bundles/jquery") <link href="@Url.Content("~/Content/kendo/2013.3.1324/kendo.common.min.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/kendo/2013.3.1324/kendo.dataviz.min.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/kendo/2013.3.1324/kendo.bootstrap.min.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/kendo/2013.3.1324/kendo.dataviz.bootstrap.min.css")" rel="stylesheet" type="text/css" /> <link href="@Url.Content("~/Content/kendo/2013.3.1324/kendo.rtl.min.css")" rel="stylesheet" type="text/css" /> <script src="@Url.Content("~/Scripts/kendo/2013.3.1324/jquery.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo/2013.3.1324/kendo.all.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo/2013.3.1324/kendo.aspnetmvc.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script> </head> <body> . . . . . @Scripts.Render("~/bundles/bootstrap") <script src="@Url.Content("~/Scripts/kendo/2013.3.1324/jquery.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo/2013.3.1324/kendo.all.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo/2013.3.1324/kendo.aspnetmvc.min.js")"></script> <script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script> <script src="@Url.Content("~/Scripts/jquery.bootstrap-modal-ajax-form.js")"></script> <script src="@Url.Content("~/Scripts/jquery.bootstrap-modal-confirm.js")"></script> @RenderSection("scripts", required: false) </body> . . .
        
        #
        
        وحید نصیری
        
        ‫۱۰ سال و ۷ ماه قبل، شنبه ۲۴ اسفند ۱۳۹۲، ساعت ۰۲:۳۶
        
        اسکریپت‌هایی که تعریف کردید، تطابقی با اسکریپت‌های فایل layout پروژه پیوست شده در انتهای بحث ندارند. فایل‌هایی مانند jquery.validate.min.js و jquery.validate.unobtrusive.min.js که در فایل layout مثال بحث، ذکر شده‌اند در کار شما تعریف نشده.
        
        #
        
        هومن
        
        ‫۱۰ سال و ۷ ماه قبل، شنبه ۲۴ اسفند ۱۳۹۲، ساعت ۰۲:۴۲
        
        حق با شماست :D
        خاطره ای که از ایمپورت کردن این دو تا توی ذهنم بود مربوط به پروزه قبلی بود این دو تا اد شده حساب میکردم... هه هه هه
        
        ببخشید اذییتتون کردم میرم اعمال کنم قضیه رو
    - #
      
      هومن
      
      ‫۱۰ سال و ۷ ماه قبل، شنبه ۲۴ اسفند ۱۳۹۲، ساعت ۰۴:۲۹
      
      سلام
      من موفق نشدم از این مودال استفاده کنم .
      
      متاسفانه در فایرباگ خطا میده...
      
      TypeError: d is undefined ...fined){c+="-";a.each(this.params,function(){h[this]=d.attr(c+this)});this.adapt(...
      
      layout را هم دقیقا کپی کردم و اضافه کردم به layout خودم باز هم همین خطا رو میداد.
      - #
        
        وحید نصیری
        
        ‫۱۰ سال و ۷ ماه قبل، شنبه ۲۴ اسفند ۱۳۹۲، ساعت ۰۴:۳۴
        
        پروژه شما باید باشد برای دیباگ. امکان دیباگ از راه دور را نداریم. لطفا در انجمن‌ها این مساله را پیگیری کنید.
#

پویا امینی

‫۱۰ سال و ۶ ماه قبل، پنجشنبه ۲۹ اسفند ۱۳۹۲، ساعت ۲۱:۲۹
با سلام، من می‌خواهم کاربر یتواند یک فایل آپلود کند درون فرم مودال کد زیر را نوشتم

<div> <input type="file" name="siteIcon" id="siteIcon" /> @Html.ValidationMessageFor(model => model.SiteImage) </div>

ولی زمانی که کاربر بر روی دکمه ثبت کلیک می‌کند فایل انتخاب شده به سمت سرور ارسال نمی‌شود.

public virtual ActionResult Create(Site site, HttpPostedFileBase siteIcon) { }

یعنی پارامتر siteIcon همیشه مقدار NULL رو داره. ممنون میشم راهنمایی کنید.
- #
  
  وحید نصیری
  
  ‫۱۰ سال و ۶ ماه قبل، پنجشنبه ۲۹ اسفند ۱۳۹۲، ساعت ۲۲:۲۳
  
  فرمی که Ajax ایی به سرور ارسال می‌شود قابلیت ارسال فایل ندارد. HttpPostedFileBase بر مبنای post back کامل کار می‌کند.
  نمی‌شود از Ajax معمولی (یا به عبارتی XMLHttpRequest) برای ارسال فایل استفاده کرد. یا باید از سیلورلایت یا فلش استفاده کنید، یا از مرورگرهایی که XMLHttpRequest Level 2 را پشتیبانی کنند (از IE 10 به بعد مثلا)، امکان Ajax upload توکار به همراه گزارش درصد آپلود را بدون نیاز به فلش یا سیلورلایت، دارند.یک نمونه پیاده سازی آن
  - #
    
    پویا امینی
    
    ‫۱۰ سال و ۶ ماه قبل، جمعه ۱ فروردین ۱۳۹۳، ساعت ۰۰:۲۳
    
    برای اینکه بتونم از این پلاگین استفاده کنم باید پلاگین jquery.bootstrap-modal-ajax-form.js رو دست کاری کنم یا احتیاج به دست کاری نیست؟

#

سیروان عفیفی

‫۹ سال و ۸ ماه قبل، چهارشنبه ۱ بهمن ۱۳۹۳، ساعت ۰۴:۱۳

البته خاصیت ریموت از نسخه 3.3.0 به بعد قابل استفاده نیست (+)، و قرار است به صور کلی در نسخه 4 این خاصیت حذف شود. (+)
برای نمایش اطلاعات به صورت فقط خواندنی می‌شود از این روش استفاده کرد:

<a id="@item.Id" class="detail" data-toggle="modal" data-target=".bs-example-modal-lg" href="#">جزئیات</a>

<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            // نتیجه اطلاعات
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

<script type="text/javascript">
        $(function() {
            $('.detail').click(function () {
                var selectedId = $(this).attr('id');
                // نتیجه اکشن متد زیر یک پارشال ویو است
                $.post('@Url.Action("GetRequestById")' + "/" + selectedId, function (data) {
                    $('.modal-content').html(data);
                });
            });
        });
</script>

#

سجاد م

‫۸ سال و ۸ ماه قبل، شنبه ۳ بهمن ۱۳۹۴، ساعت ۱۳:۴۱

با سلام ممنون از مطلب مفیدتون
من یه modal درست کردم که توش یه لیست دارم و توی هر سطر یه دکمه که میخوام عکس مربوطه رو نشون بدم.

حالا با توجه به این چه طور یه modal همراه با عکسشو روی مدال اصلی باز کنم؟
- #
  
  عثمان رحیمی
  
  ‫۸ سال و ۸ ماه قبل، شنبه ۳ بهمن ۱۳۹۴، ساعت ۱۴:۱۴
  با فرض اینکه شما در فراخوانی مودال اول مشکلی نداشته باشید . فرض میکنیم شما عکس رو با ajax فراخوانی کرده و در مودال دوم نمایش می‌دهید . فقط کافیست شما در مودال اول یک دکمه قرا دهید و با اون دکمه مودال دوم رو فراخوانی کنید . یک فایل نمونه پیوست شد.
  testmodal-(2).html
  
  من خودم اکثر اوقات با json مقادیر مورد نظر رو در مودال نشون میدم ، چیزی شبیه به این :
  
  function gettData(code) { $.ajax({ url: '@Url.Action(MVC.X.Y())', data: { code: code }, type: "POST", success: function (data) { $("#title").html(data.Title); $("#user-image").html(data.imagePath); }, error: function (response) { } }); }
  
  رویداد کلیک ردیف‌های لیست داخل مودال اول :
  
  $(document).on('click', '.item', function () { getData($(this).data("code")); $("#SecondModal").modal('toggle'); });
  - #
    
    سجاد م
    
    ‫۸ سال و ۸ ماه قبل، شنبه ۳ بهمن ۱۳۹۴، ساعت ۱۷:۴۶
    
    <img id="my_image" src="test" alt="" style="width:100%; height:100%;"> $(function () { $(document).on('click', '.details', function () { var code = $(this).attr('id'); gettData(code); $("#test2").modal('show'); }); function gettData(code) { $.ajax({ url: '@Url.Action("RenderShowMemberPicn", "Users")', data: { id: code }, type: "POST", success: function (data) { var str = "Files/Members/"+data.imagePath; $("#my_image").attr("src",str); }, error: function (response) { } }); } });
    
    ممنون از راهنمایی.
    از همین راه رفتم مشکلم حل شد ولی از jquery.bootstrap-modal-ajax-form.js نتونستم برای نمایش دوتا مودال تو در تو استفاده کنم.
    - #
      
      عثمان رحیمی
      
      ‫۸ سال و ۸ ماه قبل، شنبه ۳ بهمن ۱۳۹۴، ساعت ۱۸:۱۲
      
      لطفا فایلی رو که پیوست کردم دانلود کنید ، در فایل پیوست شده دو تا مودال روی هم نمایش داده می‌شوند و تداخلی با هم ندارند .
      برای نمایش مودال تو در تو فکر نکنم نیازی به این کتابخانه "jquery.bootstrap-modal-ajax-form.js " باشد . کتابخانه جاوااسکریت بوت استراپ کفایت میکند .
      - #
        
        سجاد م
        
        ‫۸ سال و ۸ ماه قبل، شنبه ۳ بهمن ۱۳۹۴، ساعت ۱۸:۳۰
        
        ممنون .
        گفتم که از خود بوت استرپ استفاده کردم و مودال‌های تو در تو رو نشون دادم(همونطور که گفته بودی) و مشکلم حل شد ولی نتونستم با کتابخانه مذکور از دو تا مودال استفاده کنم
#

میلاد درویشی

‫۷ سال و ۵ ماه قبل، جمعه ۲۵ فروردین ۱۳۹۶، ساعت ۲۳:۰۷

با تشکر از شما. این روش برای حالت Edit چطور میتونه پیاده سازی بشه؟
- #
  
  وحید نصیری
  
  ‫۷ سال و ۵ ماه قبل، جمعه ۲۵ فروردین ۱۳۹۶، ساعت ۲۳:۱۵
  
  نمونه‌اش در پروژه DNTIdentity استفاده شده‌است. سطر edit دار به همراه data-edit-id و سپس پردازش آن بر اساس این id دریافتی.
#

مهدی ملائیان

‫۶ سال و ۸ ماه قبل، چهارشنبه ۲۰ دی ۱۳۹۶، ساعت ۱۵:۵۵
باتشکر. فرم مودال من بصورت لوکال نمایش داده میشه ولی زمانی که کد رو پابلش می‌کنم و روی سرور قرار میدم مودال نمایش داده نمیشه ، کنسول مرورگر رو هم برای بررسی خطا چک کردم ولی خطایی صادر نشده . در نتیجه متوجه منشاء اشکال نمی‌شوم.
کد من :

grid.Column(columnName: "Description", header: "شرح", format: item => @Html.Raw( $"<a data-toggle='modal' class='fa fa-id-card-o' href={@renderModalPartialViewUrl+'/'+item.Id} data-target='#myModal'></a>")),

سایر جزئیات مودال هم طبق مثال انتهای مطلب نوشته شده و نتیجه دلخواه رو بصورت لوکال میگیرم.اگر امکانش هست راهنمائی بفرمائید.
- #
  
  مهدی ملائیان
  
  ‫۶ سال و ۸ ماه قبل، چهارشنبه ۲۰ دی ۱۳۹۶، ساعت ۱۷:۲۹
  
  در حالت لوکال پارشال ویوو به فرم مدال بدرستی تزریق میشه ولی در حالت پابلیش شده این تزریق پارشال ویوو انجام نمیشه ، و محتوای مودال خالیه.چرایی این حالت رو نمی‌دونم
  - #
    
    وحید نصیری
    
    ‫۶ سال و ۸ ماه قبل، چهارشنبه ۲۰ دی ۱۳۹۶، ساعت ۱۷:۵۵
    
    - روی صفحه نهایی کلیک راست کنید و سپس سورس خروجی HTML تولید شده را به دقت بررسی کنید.
    - برگه‌ی network کنسول developer مرورگر را جهت بررسی خروجی درخواست ارسالی به سرور، به دقت بررسی کنید. اینجا علت اصلی را پیدا خواهید کرد.
    - خطاهای سمت سرور را توسط ELMAH لاگ و بررسی کنید.