Làm thế nào để show popup modal mặc định trong bootstrap khi load trang

Lượt xem: 11080

Xem demo

Để hiển thị popup modal trong bootstrap mặc định khi load trang chúng ta làm như sau:

1.HTML 

 <div id="dnbtdevModal" class="modal fade" role="dialog">
 <div class="modal-dialog">    
   <div class="modal-content">
     <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">×</button>
        <h4 class="modal-title">Tiêu đề modal</h4>
      </div>
      <div class="modal-body">
        <p>Nội dung của modal bạn muốn hiển thị.</p>
      </div>
      <div class="modal-footer">
      <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
     </div>
    </div>
  </div>
</div>

2. jQuery
 


  $(window).load(function(){        
   $('#dnbtdevModal').modal('show');
    }); 

Nếu bạn vẫn chưa hiểu hoặc làm vẫn chưa làm được thì hãy xem video. Trong video mình hướng dẫn chi tiết cụ thể từng bước để bạn có thể làm được

Các bạn có thể tải full source code ở đây (Do phần source mình mới cập nhật này 01-04-2023 nên mình dùng version mới nhất của bootstrap tại thời điểm này. Sẽ khác đôi chút chia sẻ trong video. Vì video mình ra lâu rồi.)

Xem demo