Pemalam kotak modal Bootstrap (Modal) yang anda mesti pelajari setiap hari kemahiran javascript

Dalam pelajaran ini kita akan mempelajari terutamanya tentang pemalam kotak modal dalam Bootstrap, yang merupakan pemalam fungsi pop timbul yang sangat biasa untuk tapak web interaktif.

1. Penggunaan asas
Menggunakan komponen pop timbul kotak modal memerlukan tiga lapisan elemen bekas div, iaitu modal (lapisan pengisytiharan modal),
dialog (lapisan pengisytiharan tetingkap), kandungan (lapisan kandungan). Di dalam lapisan kandungan, terdapat tiga lapisan iaitu header, body, dan footer.
//Contoh asas

<!-- 模态声明，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>

Jika anda mahu kotak modal bersembunyi secara automatik dan kemudian muncul tetingkap dengan mengklik butang, anda perlu melakukan perkara berikut.

//模态框去掉 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. Arahan penggunaan
Selepas pengenalan penggunaan asas, mari kita lihat pelbagai kegunaan penting pemalam. Semua pemalam adalah berdasarkan JavaScript/jQuery. Kemudian, terdapat empat elemen: penggunaan, parameter, kaedah dan peristiwa.
1
Jenis pertama: Anda boleh lulus atribut data

//data-toggle

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

togol data menunjukkan jenis pencetus

sasaran data mewakili nod yang dicetuskan

Jika bukannya menggunakan 07cb10094d7fc1aeafbde86dbf86ce42, tetapi 3499910bf9dac5ae3c52d5ede7383485, sasaran data juga boleh menggunakan href="#myModal"

Ganti. Sudah tentu, kami mengesyorkan menggunakan sasaran data. Selain daripada dua atribut yang diisytiharkan togol data dan sasaran data, terdapat beberapa pilihan yang tersedia.

2
Kesannya boleh dikawal dengan menetapkan pengisytiharan atribut data-* pada elemen HTML.

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

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

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

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

href="index.html"

Sudah tentu, ia juga boleh ditetapkan terus dalam JavaScript.

//通过 jQuery 方式声明

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

3 Jika tetingkap pop timbul tidak dipaparkan secara lalai, bagaimanakah tetingkap timbul boleh dipaparkan dengan mengklik sebelum dan selepas?

//点击显示弹窗

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

4

Kotak modal menyokong 4 jenis masa, sepadan dengan sebelum muncul, selepas muncul, sebelum ditutup dan selepas ditutup.

Di atas adalah keseluruhan kandungan artikel ini, saya harap ia akan membantu kajian semua orang.