BootstrapNo Comments

default thumbnail

Here is a bootstrap 4 modal for popup window. It’s very easy to use. Data-toggle = “modal” and data-target=”#modalNew” can be used in <a> tag also. In header, bootstrap.min.css and bootstrap.min.js should be included. Data-target id and modal id should be same to open the modal

Button to open the modal

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modalNew">
Open modal
</button>

Modal


<div class="modal" id="modalNew">  //id and data-target should be same.
    <div class="modal-dialog">
        <div class="modal-content">

            <!– Modal Header –>
               <div class="modal-header">
                    <h4 class="modal-title">Modal Heading</h4>
                   <button type="button" class="close" data-dismiss="modal">×</button>
               </div>

             <!– Modal body –>
                 <div class="modal-body">
Modal body..
                  </div>

              <!– Modal footer –>
              <div class="modal-footer">
                      <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
               </div>

           </div>
     </div>
</div>

Be the first to post a comment.

Add a comment