butang tutup html

Butang tutup dalam HTML digunakan untuk menutup tetingkap atau pop timbul dalam halaman web atau aplikasi. Butang tutup biasanya ikon atau teks, dan pengguna boleh menutup tetingkap semasa atau kotak pop timbul dengan mengklik butang. Artikel ini akan memperkenalkan butang tutup dalam HTML dan cara melaksanakan pelbagai jenis butang tutup.

1. Penggunaan asas butang tutup

Dalam HTML, butang tutup paling asas ialah elemen butang Pelaksanaan khusus adalah seperti berikut:

<button onclick="window.close()">关闭</button>

Pelaksanaan ini butang tutup Kaedah ini sangat mudah Apabila pengguna mengklik butang, fungsi JavaScript window.close() akan dipanggil untuk menutup tetingkap semasa.

2. Gaya ikon butang tutup

Selain butang teks, kami juga boleh menggunakan gambar atau ikon untuk melaksanakan butang tutup untuk menambah kesan visual. Ikon penutup yang biasa digunakan termasuk X, ×, dsb., yang boleh dilaksanakan menggunakan ikon fon atau imej tersuai. Berikut ialah dua kaedah pelaksanaan:

1 Gunakan ikon fon

Ikon fon boleh menentukan warna, saiz dan gaya lain melalui CSS, yang lebih fleksibel dan mudah. Selain itu, ikon fon boleh disesuaikan dengan skrin dengan resolusi berbeza, menjadikannya lebih jelas dan lancar. Berikut ialah contoh butang tutup menggunakan ikon fon Font Awesome:

<link href="https://use.fontawesome.com/releases/v5.0.6/css/all.css" rel="stylesheet">
<button onclick="window.close()">
  <i class="fas fa-times"></i>
</button>

Di sini kami menggunakan elemen link untuk mengimport fail CSS Font Awesome, dan kemudian meletakkan elemen i dalam butang dan tetapkan class Atributnya ialah fas fa-times, yang bermaksud menggunakan ikon times. Apabila pengguna mengklik butang tutup, laksanakan JavaScript window.close().

2. Gunakan gambar tersuai

Untuk menggunakan gambar tersuai untuk melaksanakan butang tutup, anda perlu menyediakan gambar terlebih dahulu pada halaman web tidak akan terlalu masa-. memakan. Contoh berikut menggunakan ikon tutup dalam format PNG:

<button onclick="window.close()">
  <img src="close.png" alt="关闭">
</button>

Di sini kita menyarangkan elemen img dalam butang dan menggunakan atribut src untuk menentukan URL imej itu perihalan imej Pengguna Apabila butang diklik, laksanakan JavaScript alt. window.close()

<button class="close-button" onclick="window.close()">关闭</button>

untuk menggayakan butang. Berikut ialah kod CSS yang sepadan: close-button

.close-button {
  border: 1px solid #999;
  color: #999;
  font-size: 14px;
  padding: 6px 12px;
  border-radius: 4px;
  cursor: pointer;
  background-color: transparent;
  transition: all .3s ease-in-out;
}

.close-button:hover {
  background-color: #999;
  color: #fff;
}

<button class="close-icon-button" onclick="window.close()">
  <i class="fas fa-times"></i>
</button>

di sini, dan juga menetapkan nama kelas close-icon-button elemen terbenam butang i, menunjukkan penggunaan ikon fas fa-times. times

.close-icon-button {
  border: none;
  padding: 0;
  background-color: transparent;
  cursor: pointer;
  transition: all .3s ease-in-out;
}

.close-icon-button:hover {
  transform: rotate(45deg);
}

.close-icon-button i {
  color: #999;
  font-size: 14px;
  transition: all .3s ease-in-out;
}

.close-icon-button:hover i {
  color: #fff;
}

<div class="modal">
  <button class="close-icon-button" onclick="closeModal()">
    <i class="fas fa-times"></i>
  </button>
  <!-- 模态框内容 -->
</div>

Fungsi JavaScript untuk menutup kotak modal. closeModal()

.modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 400px;
  height: 300px;
  background-color: #fff;
  box-shadow: 0 0 10px rgba(0, 0, 0, .3);
}

.modal button {
  position: absolute;
  top: 10px;
  right: 10px;
}

<div class="tab">
  <button class="close-tab-button" onclick="closeTab()">
    <img src="close.png" alt="">
  </button>
  <a href="#">标签页标题</a>
</div>

.tab {
  height: 40px;
  line-height: 40px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px 4px 0 0;
  background-color: #f7f7f7;
  position: relative;
}

.close-tab-button {
  position: absolute;
  right: 5px;
  top: 5px;
  padding: 5px;
  border: none;
  background-color: transparent;
  cursor: pointer;
}

.close-tab-button img {
  width: 16px;
  height: 16px;
}

Atas ialah kandungan terperinci butang tutup html. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!