Home > php教程 > PHP开发 > body text

Bootstrap modal box disables clicking on the blank space to close

高洛峰
Release: 2016-12-09 14:32:13
Original
1474 people have browsed it

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>
Copy after login

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.


Related labels:
source:php.cn
Statement of this Website
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
Popular Recommendations
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template