ایجاد modal

سلام 

برای ایجاد modal با bootstrap میتونید از این لینک استفاده کنید تمامی توضیحات توی خود سایت bootstrap داده شده که چطوری میتونید ایجاد کنید. 

برای ساخت بدون استفاده از bootstrap هم از این لینک کمک بگیرید خیلی کار سختی نیست ساختنش و با تمرین براحتی میتونید پیاده سازی کنید 

سلام و احترام

ما من قدم به قدم جلو بیاید تا با هم یک مدال ایجاد کنیم. (ابتدا باید خود bootstrap رو لود کنید)

ابتدا بیایید تا یک دکمه ایجاد کنیم تا وقتی که روش کلیک میکنیم مدال ما باز شه.

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
  Launch demo modal
</button>

بعد از قرار دادن دکمه حال باید خود modal رو قرار بدیم تا بتونیم محتوایی رو که میخوایم رو نشون بدیم.

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>

شما میتونید درون div که کلاس modal-body را دارد محتوای خود را قرار دهید و در div که کلاس modal-footer را دارد میتونید دکمه هایی که میخواید رو قرار بدید.

اما این مدال چه گونه با فشار دادن دکمه باز میشود؟

اگر دقت کنید دکمه‌ای که قرار دادیم یک ویژگی به اسم data-target دارد که دورن خود id خود divی که باز میشود را دارد. ینی اگر به modal نگاهی بندازید میتونید آیدی را مشاهده کنید. البته این را هم بگویم که کلاس ها و ویژگی ها دیگر نیز وجود دارد که هم ظاهر بهتری داشته باشد و effect داشته باشد.

باز اگه سوالی بود بپرسید من در خدمتم، موفق باشید.

اگه میخواید تا به جای button از چیز دیگه ای استفاده کنید فقط کافیه attribute زیر رو به اون بخشی که میخواید روش کلیک تا باز شه رو بدید

data-toggle="modal" data-target="#exampleModal"

توجه داشته باشید که data-target باید id خود modal داشته باشه

اگه خواستید هر جای صفحه که dblclick میکنید modal bootstrap باز بشه میتونید از کد زیر استفاده کنید.

$(document).dblclick(function(){
  $('#exampleModalCenter').modal('show')
  });