نمایش فرم مودال (modal) بوت استرپی توسط جی کویری

یک مثال ساده براتون مینویسم می تونید از همین مثال نمونه های پیچیده تر رو هم بسازید.

در دستورات Html پایین دو بخش داریم. اول بخش maincontent که محتویات View صفحه یا view شما هست. این بخش رو کاربر به صورت عادی میتونه ببینه. در ادامه یک div با id برابر با myModal داریم که کلاسهای modal و fade رو داره. کلاس modal باعث میشه این div دیده نشه.

<div id="maincontent">
   ...
   <button onclick='showmodal'>Show Modal</button>
</div>

<div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5>Title</h5>
            </div>
            <form>
                <div class="modal-body">
                   
                </div>
            </form>
        </div>
    </div>
</div>

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

<script>
   $('showmodal').on('click', function(){
      $("#myModal").modal('show');
   });
</script>

توسط متد modal و عبارت show میتونید فرم رو به صورت modal نمایش بدید.