Cara membuat kotak modal responsif menggunakan HTML, CSS dan jQuery

Cara membuat kotak modal responsif menggunakan HTML, CSS dan jQuery

Dalam reka bentuk web moden, kotak modal (Modal) ialah elemen interaktif biasa, yang boleh digunakan untuk memaparkan kandungan tambahan, Borang atau maklumat segera. Kotak modal boleh muncul selepas pengguna mengklik butang atau pautan, meliputi halaman semasa dan menggelapkan kandungan latar belakang untuk menumpukan perhatian pengguna.

Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk mencipta kotak modal responsif, membolehkan anda menggunakan elemen interaktif ini secara fleksibel dalam halaman web dan memastikan ia boleh menyesuaikan diri dengan saiz skrin peranti yang berbeza.

Struktur HTML:
Mari kita lihat dahulu struktur HTML kotak modal:

<!-- 按钮或链接 -->
<button id="modalBtn">打开模态框</button>

<!-- 模态框 -->
<div id="modal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <h2>模态框标题</h2>
    <p>这是模态框的内容。</p>
  </div>
</div>

Dalam contoh ini, kami menggunakan butang untuk mencetuskan paparan kotak modal. Kandungan kotak modal termasuk tajuk dan perenggan.

Gaya CSS:
Seterusnya, kami menambah beberapa gaya CSS asas pada modal dan butang.

/* 按钮样式 */
button {
  padding: 10px 20px;
  background-color: blue;
  color: white;
  border: none;
  cursor: pointer;
}

/* 模态框样式 */
.modal {
  display: none; /* 初始隐藏 */
  position: fixed; /* 固定定位 */
  z-index: 1; /* 高于其他元素 */
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto; /* 允许滚动 */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明黑色背景 */
}

/* 模态框内容样式 */
.modal-content {
  background-color: white;
  margin: 10% auto; /* 居中 */
  padding: 20px;
  width: 80%;
  max-width: 600px;
}

/* 关闭按钮样式 */
.close {
  float: right;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
}

.close:hover,
.close:focus {
  color: red;
  text-decoration: none;
  cursor: pointer;
}

Skrip jQuery:
Akhir sekali, kami menggunakan jQuery untuk menulis beberapa skrip untuk mengendalikan paparan dan penyembunyian kotak modal.

$(document).ready(function () {
  // 当点击按钮时显示模态框
  $("#modalBtn").click(function () {
    $("#modal").css("display", "block"); // 显示模态框
  });

  // 当点击关闭按钮或者模态框之外的区域时隐藏模态框
  $(".close, .modal").click(function () {
    $("#modal").css("display", "none"); // 隐藏模态框
  });

  // 防止点击模态框内容区域时隐藏模态框
  $(".modal-content").click(function () {
    return false;
  });
});

Dalam skrip ini, kami menggunakan acara click jQuery untuk melaksanakan fungsi menunjukkan dan menyembunyikan kotak modal. Apabila butang diklik, modal akan dipaparkan. Kotak modal akan disembunyikan apabila butang tutup atau kawasan di luar kotak modal diklik.

Paparan kesan:
Kini, kami telah menyelesaikan pengeluaran kotak modal responsif yang mudah. Anda boleh menyalin kod di atas ke dalam halaman web anda, dan kemudian anda boleh memaparkan kotak modal pada halaman web.

Pada peranti mudah alih, mod secara automatik menyesuaikan diri dengan saiz skrin, dan keseluruhan kandungan boleh dilihat dengan meleret. Pada desktop, modal dipusatkan dan kandungan latar belakang digelapkan.

Ringkasan:
Dengan menggunakan HTML, CSS dan jQuery, kami boleh membuat kotak modal responsif dengan mudah. Kotak modal ini serba boleh dan boleh menyesuaikan diri dengan saiz skrin peranti yang berbeza untuk memberikan pengalaman pengguna yang baik.

Saya harap artikel ini akan membantu anda memahami dan menggunakan kotak modal. Jika anda tidak biasa dengan HTML, CSS dan jQuery, adalah disyorkan untuk mempelajari pengetahuan asas ini sebelum cuba membuat kotak modal. Saya doakan anda berjaya!

Atas ialah kandungan terperinci Cara membuat kotak modal responsif menggunakan HTML, CSS dan jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!