Home > Web Front-end > JS Tutorial > body text

Detailed explanation on the use of Bootstrap modal box

零下一度
Release: 2017-06-30 16:28:09
Original
1910 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.

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!

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 Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template