آموزش کار با پلاگین Modal در بوت استرپ با مثال

پلاگین Modal

پلاگین های بوت استرپ

Modal یک پنجره child است که روی پنجره والد ، لایه بندی شده است. به طور معمول ، هدف این است که محتواها را از منابع جداگانه نمایش دهیم ؛ به طوری که بتوانیم برخی از تعاملات را بدون خروج از پنجره والد داشته باشیم. پنجره های فرزند می توانند اطلاعات ، تعاملات یا سایر موارد را فراهم کنند.

اگر بخواهیم که این پلاگین را به صورت جداگانه وارد کنیم ، در این صورت از فایل modal.js استفاده می نماییم. در سایر موارد ، همان طور که در مقاله "مروری بر پلاگین های بوت استرپ" ذکر شد ، می توانیم از یکی از فایل های  bootstrap.js یا bootstrap min.js.min.js استفاده کنیم.

نحوه کاربرد

ما می توانیم محتوای مخفی پلاگین modal را تغییر دهیم :

• از طریق ویژگی های داده ها : ویژگی data-toggle = "modal"  را بر روی یک عنصر کنترل کننده مانند یک کلید یا لینک ، همراه با data-target = "#identifier"  یا href = "#identifier"  برای یک modal خاص (با id=”identifier”) با toggle تنظیم نماییم.
• از طریق JavaScript : برای این کار ما می توانیم یک modal را با id=”identifier” با یک خط کد جاوا اسکریپت فراخوانی نماییم.

$('#identifier').modal(options)

مثال

پنجره modal ثابت در مثال زیر نشان داده شده است :

<h2>Example of creating Modals with Twitter Bootstrap</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <div class = "modal-dialog">
      <div class = "modal-content">
         
         <div class = "modal-header">
            <button type = "button" class = "close" data-dismiss = "modal" aria-hidden = "true">
                  &times;
            </button>
            
            <h4 class = "modal-title" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Add some text here
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
  
</div><!-- /.modal -->

خروجی قطعه کد فوق به صورت زیر می باشد :

جزئیات قطعه کد فوق

• برای فراخوانی پنجره modal ، نیاز به برخی از انواع trigger ها (راه اندازها) خواهیم داشت. می توانیم از یک کلید یا یک لینک استفاده نماییم. در این مثال ، ما از یک کلید استفاده کرده ایم.
• اگر به کد بالا توجه نمایید ، خواهید دید که در تگ <button> ، مقدار "data-target = "#myModal  هدف موردنیاز است که می خواهیم بر روی صفحه بارگذاری کنیم. این کد به ما امکان می دهد چندین modal را در صفحه ایجاد کرده و سپس برای هر یک از آنها یک راه حل متفاوت داشته باشیم. در این صورت ، برای راه اندازی ، ما نباید چندین modal را هم زمان بارگذاری کنیم ، می توانیم صفحات بسیاری را در زمان های مختلف بارگذاری کنیم.
• دو کلاس برای ایجاد note در modal وجود دارد :
  • کلاس اول modal. است ، که به سادگی محتوای تگ <div> را به عنوان یک mdal مشخص می کند.
  • کلاس دوم fade. است. زمانی که Modal تغییر وضعیت می دهد ، این کلاس باعث می شود که محتویات داخل و خارج آن محو شوند.
• "Aria-labelledby=”myModalLabel ، عنوان modal را حمل می کند.
• ویژگی "aria-hidden = "true برای نگه داشتن Modal Window نامرئی تا زمانی که یک trigger (راه انداز) به وجود می آید (مثل کلیک روی کلید مرتبط) استفاده می شود.
• <"div class = "modal-header> . مقدار modal-header کلاسی است که برای تعریف استایل برای هدر پنجره modal به کار می رود.
• "class = "close یک کلاس CSS مربوط به close است که استایل را برای کلید close پنجره Modal تنظیم می کند.
• "data-dismiss = "modal ، یک ویژگی داده سفارشی مربوط به HTML5 می باشد. در اینجا این ویژگی برای بستن پنجره modal استفاده شده است.
• "class = "modal-body ، یک کلاس CSS بوت استرپ است که برای تنظیم کردن استایل بستن پنجره modal استفاده می شود.
• "class = "modal-footer ، کلاس CSS بوت استرپ است که برای تنظیم استایل پانویس (footer) پنجره modal استفاده می شود.
• "data-toggle = "modal ، ویژگی data-toggle یک ویژگی سفارشی HTML5 است که برای باز کردن پنجره Modal  استفاده می شود.

آپشن ها (Options)

آپشن های خاصی وجود دارند که می توانند از طریق ویژگی های داده یا جاوا اسکریپت برای سفارشی سازی ظاهر و حال و هوای پنجره Modal استفاده شوند. جدول زیر حاوی فهرست این آپشن ها می باشد :

<a data-toggle = "modal" href = "remote.html" data-target = "#modal">Click me</a>

متدها

در ادامه برخی از متدهای مفید که می توانند با modal() استفاده شوند ، آورده شده اند :

$('#identifier').modal({
   keyboard: false
})

$('#identifier').modal('toggle')

$('#identifier').modal('show')

$('#identifier').modal('hide')

مثال

مثال زیر نحوه کاربرد متدهای فوق را نشان می دهد :

<h2>Example of using methods of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <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" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Press ESC button to exit.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal({
      keyboard: true
   })});
</script>

خروجی قطعه کد فوق به صورت زیر می باشد :

کافی است که روی کلید Esc کلیک شود تا پنجره modal بسته شود.

رویدادها

در جدول زیر رویدادهایی که با modal کار می کنند ، لیست شده اند. این رویدادها ممکن است برای کار با توابع مورد استفاده قرار گیرند.

  $('#identifier').on('show.bs.modal', function () {

   // do something…

$('#identifier').on('shown.bs.modal', function () {

   // do something…

})

$('#identifier').on('hide.bs.modal', function () {

   // do something…

})

$('#identifier').on('hidden.bs.modal', function () {

   // do something…

})

مثال

مثال زیر نحوه کاربرد رویدادها را نشان می دهد :

<h2>Example of using events of Modal Plugin</h2>

<!-- Button trigger modal -->
<button class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#myModal">
   Launch demo modal
</button>

<!-- Modal -->
<div class = "modal fade" id = "myModal" tabindex = "-1" role = "dialog" 
   aria-labelledby = "myModalLabel" aria-hidden = "true">
   
   <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" id = "myModalLabel">
               This Modal title
            </h4>
         </div>
         
         <div class = "modal-body">
            Click on close button to check Event functionality.
         </div>
         
         <div class = "modal-footer">
            <button type = "button" class = "btn btn-default" data-dismiss = "modal">
               Close
            </button>
            
            <button type = "button" class = "btn btn-primary">
               Submit changes
            </button>
         </div>
         
      </div><!-- /.modal-content -->
   </div><!-- /.modal-dialog -->
   
</div><!-- /.modal -->

<script>
   $(function () { $('#myModal').modal('hide')})});
</script>

<script>
   $(function () { $('#myModal').on('hide.bs.modal', function () {
      alert('Hey, I heard you like modals...');})
   });
</script>

خروجی قطعه کد فوق به صورت زیر می باشد :

همان طور که در پنجره فوق دیده می شود ، اگر روی کلید Close کلیک کنیم ، رویداد hide یک پیام هشدار را نمایش خواهد داد.