Home >php教程 >PHP开发 >Bootstrap modal box disables clicking on the blank space to close

Bootstrap modal box disables clicking on the blank space to close

高洛峰
高洛峰Original
2016-12-09 14:32:131487browse

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.


Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn