Detailed explanation on the use of Bootstrap modal box

Modal is a subform that covers the parent form. Typically, the purpose is to display content from a separate source that can have some interaction without leaving the parent form. Subforms provide information, interaction, and more. By default, the bootstrap modal box will be closed by clicking on other blank areas (usually the mask layer), so the following method is to prohibit clicking on other areas to close the modal box.

$('#myModal').modal({backdrop: 'static', keyboard: false});

When backdrop:static, the blank space is not closed. When

keyboard:false, the esc keyboard is not closed.

The above code is also used to open the modal box.

You can also use the following method:

<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false">
 <div class="modal-dialog custom-dialog succ-dialog">
 <div class="modal-content">
  <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
  <h4>提示信息</h4>
  </div>
  <div class="modal-body">
  <div><img src="images/loading.gif"><p><span>投标成功！</span><img src="images/success.png"></p></div>
  </div>
 </div>
 </div>
</div>

The data-backdrop="static" here specifies a static background, which will not close the modal box when the user clicks outside the modal box. Data-keyboard refers to closing the modal box when the escape key is pressed. When set to false, the key is invalid.

The above is the detailed content of Detailed explanation on the use of Bootstrap modal box. For more information, please follow other related articles on the PHP Chinese website!