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

Comprehensive analysis of the implementation method of Bootstrap pop-up window_javascript skills

WBOY
Release: 2016-05-16 15:28:34
Original
1340 people have browsed it

1. Structural analysis

The modal pop-up boxes in the Bootstrap framework use the "modal", "modal-dialog" and "modal-content" styles respectively, and the real content of the pop-up window is placed in "modal-content". Its main It also includes three parts:

 ☑ The header of the pop-up box, generally represented by "modal-header", mainly includes the title and close button

 ☑ The body of the pop-up box, usually represented by "modal-body", the main content of the pop-up box

 ☑ The foot of the pop-up box, usually represented by "modal-footer", mainly places the operation buttons

<div class="modal" id="mymodal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Copy after login

2. The data-toggle class triggers the pop-up window (no need to write JS)

1. Modal pop-up window declaration , only need to customize two necessary attributes: data-toggle and data-target.

<!-- data-target触发模态弹出窗元素 -->
<button class="btn btn-primary" data-toggle="modal" data-target="#mymodal-data" type="button">通过data-target触发</button>
<!-- 模态弹出窗内容 -->
<div class="modal" id="mymodal-data" tabindex="-1" role="dialog" aria-labelledby="mySmallModalLabel" aria-hidden="true">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div>
 </div>
</div>
Copy after login

2. data-parameter description

In addition to controlling modal pop-up windows through data-toggle and data-target, the Bootstrap framework also provides other custom data-attributes for modal pop-up boxes to control modal pop-up windows.

3. JS trigger pop-up window (JS needs to be written)

 1. In addition to using custom attributes to trigger modal pop-up boxes, you can also trigger modal pop-up windows through JavaScript methods. Triggered by giving an event to an element. For example, give a button a click event, and then trigger a modal pop-up window.

HTML:


<div class="modal" id="mymodal">
 <div class="modal-dialog">
 <div class="modal-content">
 <div class="modal-header">
 <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
 <h4 class="modal-title">模态弹出窗标题</h4>
 </div>
 <div class="modal-body">
 <p>模态弹出窗主体内容</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
 <button type="button" class="btn btn-primary">保存</button>
 </div>
 </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Copy after login

JS:

 $(function(){
 $(".btn").click(function(){
 $("#mymodal").modal("toggle");
 });
 });
Copy after login

2. When using JavaScript to trigger a modal pop-up window, the Bootstrap framework provides some settings, mainly including

Property settings:

$(function(){
 $(".btn").click(function(){
 $("#mymodal").modal({
  keyboard:false
 });
 });
});
Copy after login

Parameter settings:

Event settings:

$('#myModal').on('hidden.bs.modal', function (e) {
 // 处理代码...
})
Copy after login

4. Pop-up window size

The Bootstrap framework also provides different sizes for modal popups.

One is the large size style "modal-lg".

<divclass="modal-dialog modal-lg">
 <divclass="modal-content"> ... </div>
</div>
Copy after login

The other is the small size style "modal-sm".

<divclass="modal-dialog modal-sm">
 <divclass="modal-content"> ... </div>
</div>
Copy after login

The above is a complete introduction to the implementation method of Bootstrap pop-up window. I hope it will be helpful to everyone's learning.

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