Bootstrap modal box (Modal) plug-in that you must learn every day_javascript skills

In this lesson we will mainly learn about the modal box plug-in in Bootstrap, which is a very common pop-up function plug-in for interactive websites.

1. Basic usage
Using a modal box pop-up component requires three layers of div container elements, namely modal (modal declaration layer),
dialog (window declaration layer), content (content layer). Within the content layer, there are three layers, namely header, body, and footer.
//Basic example

<!-- 模态声明，show 表示显示 -->
<div class="modal show" tabindex="-1">
  <!-- 窗口声明 -->
  <div class="modal-dialog">
    <!-- 内容声明 -->
    <div class="modal-content">
      <!-- 头部 -->
      <div class="modal-header">
        <button type="button" class="close"
        data-dismiss="modal">
          <span>&times;</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">
          注册
        </button>
        <button type="button" class="btn btn-primary">
          登录
        </button>
      </div>
    </div>
  </div>
</div>

If you want the modal box to hide automatically and then pop up the window by clicking the button, you need to do the following.

//模态框去掉 show，增加一个 id

<div class="modal" id="myModal">
//点击触发模态框显示

<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
  点击弹窗
</button>
//弹窗的大小有三种，默认情况下是正常，还有 lg(大)和 sm(小)

<div class="modal-dialog modal-lg">
<div class="modal-dialog sm-lg">
//可设置淡入淡出效果

<div class="modal fade" id="myModal">
//在主体部分使用栅格系统中的流体


<!-- 主体 -->
<div class="modal-body">
  <div class="container-fluid">
    <div class="row">
      <div class="col-md-4">
        1
      </div>
      <div class="col-md-4">
        1
      </div>
      <div class="col-md-4">
        1
      </div>
    </div>
  </div>
</div>

2. Instructions for use
After the basic usage introduction, let’s take a look at the various important uses of the plug-in. All plug-ins are based on JavaScript/jQuery. Then, there are four elements: usage, parameters, methods and events.
1. Usage
The first type: You can pass the data attribute

//data-toggle

data-toggle="modal" data-target="#myModal"

data-toggle indicates trigger type
data-target represents the triggered node

If instead of using , but , the data-target can also use href="#myModal"

Replace. Of course, we recommend using data-target. In addition to the two declared attributes data-toggle and data-target, there are some available options.

2. Parameters
The effect can be controlled by setting the data-* attribute declaration on the HTML element.

//空白背景且点击不关闭

data-backdrop="false"
//按下 esc 不关闭

data-keyboard="false"
//初始化隐藏，如果是按钮点击触发，第一次点击则无法显示，第二次显示。

data-show="false"
//加载一次 index.html 到容器内

href="index.html"

Of course, it can also be set directly in JavaScript.

//通过 jQuery 方式声明

$('#myModal').modal({
  show : true,
  backdrop : false,
  keyboard : false,
  remote : 'index.html',
}); 

3. Method
If the pop-up window is not displayed by default, then how can the pop-up window be displayed by clicking before and after?

//点击显示弹窗

$('#btn').on('click', function() {
  $('#myModal').modal('show');
}); 

4. Event
The modal box supports 4 types of time, corresponding to before popping up, after popping up, before closing and after closing.

$('#myModal').on('show.bs.modal', function() {
  alert('在 show 方法调用时立即触发！');
});

$('#myModal').on('shown.bs.modal', function() {
  alert('在模态框显示完毕后触发！');
});

$('#myModal').on('hide.bs.modal', function() {
  alert('在 hide 方法调用时立即触发！');
});

$('#myModal').on('hiden.bs.modal', function() {
  alert('在模态框显示完毕后触发！');
});

$('#myModal').on('loaded.bs.modal', function() {
  alert('远程数据加载完毕后触发！');
});

The above is the entire content of this article, I hope it will be helpful to everyone’s study.