HTML, CSS dan jQuery: Bina modal yang cantik
HTML, CSS dan jQuery: Bina kotak modal yang cantik
Pengenalan:
Tetingkap timbul atau kotak modal sering digunakan dalam halaman web untuk memaparkan maklumat dan mencapai kesan interaktif. Artikel ini akan memperkenalkan cara menggunakan HTML, CSS dan jQuery untuk membina kotak modal yang cantik, dengan contoh kod khusus.
1. Struktur HTML:
Pertama, kita perlu mencipta struktur HTML untuk menampung kotak modal. Kodnya adalah seperti berikut:
<!DOCTYPE html>
<html>
<head>
<title>漂亮的模态框</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<button class="open-btn">打开模态框</button>
<div class="modal">
<div class="modal-content">
<span class="close-btn">×</span>
<h1 id="这是一个漂亮的模态框">这是一个漂亮的模态框</h1>
<p>欢迎使用模态框示例</p>
</div>
</div>
<script src="jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>Dalam kod di atas, kami mencipta butang yang membuka kotak modal dan menggunakan elemen div sebagai bekas kotak modal. Kandungan kotak modal diletakkan dalam div modal-content Butang tutup menggunakan elemen span dan menetapkan Nama kelas close-btn. div元素作为模态框的容器。模态框的内容放在一个modal-content的div中，关闭按钮使用一个span元素，并设置了一个close-btn的类名。
二、CSS样式：
接下来，我们需要为模态框添加一些样式。在创建一个名为style.css的文件，并将下面的样式代码添加到该文件中：
.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.4);
}
.modal-content {
background-color: #fefefe;
margin: 15% auto;
padding: 20px;
border: 1px solid #888;
width: 80%;
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
animation-name: modalopen;
animation-duration: 0.4s;
}
.close-btn {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close-btn:hover,
.close-btn:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
@keyframes modalopen {
from {transform: scale(0)}
to {transform: scale(1)}
}以上的代码使用了一些常见的CSS样式，具体解释如下：
.modal类用于设置模态框的基本样式，包括设置模态框的显示隐藏、定位、宽高、背景色等。.modal-content类用于设置模态框内容的样式，包括背景色、边框、阴影等。.close-btn类用于设置关闭按钮的样式，包括颜色、字体大小等。@keyframes用于定义一个动画效果，使模态框从缩小到放大的过程具有过渡效果。
三、jQuery脚本：
最后，我们使用jQuery来实现模态框的功能。创建一个名为script.js的文件，并将下面的代码添加到该文件中：
$(document).ready(function() {
$(".open-btn").click(function() {
$(".modal").fadeIn();
});
$(".close-btn").click(function() {
$(".modal").fadeOut();
});
});以上代码使用了jQuery的fadeIn()和fadeOut()
style.css dan tambahkan kod gaya berikut pada fail: rrreee
Kod di atas menggunakan beberapa gaya CSS biasa, yang dijelaskan seperti berikut:.modal digunakan untuk menetapkan gaya asas kotak modal, termasuk menetapkan paparan dan penyembunyian, kedudukan, lebar, tinggi, warna latar belakang, dll. kotak modal. Kelas -
.modal-contentdigunakan untuk menetapkan gaya kandungan kotak modal, termasuk warna latar belakang, jidar, bayang-bayang, dsb. - Kelas
.close-btndigunakan untuk menetapkan gaya butang tutup, termasuk warna, saiz fon, dsb.
@keyframes digunakan untuk menentukan kesan animasi untuk menjadikan kotak modal mempunyai kesan peralihan daripada mengecut kepada membesar. 🎜🎜3. Skrip jQuery: 🎜🎜Akhir sekali, kami menggunakan jQuery untuk melaksanakan fungsi kotak modal. Cipta fail bernama script.js dan tambahkan kod berikut pada fail: 🎜rrreee🎜Kod di atas menggunakan fadeIn() dan fadeOut() jQuery. kod> kaedah untuk mengawal paparan dan penyembunyian kotak modal. 🎜🎜Kesimpulan: 🎜🎜Melalui kerjasama HTML, CSS dan jQuery, kami membina kotak modal yang cantik dan melaksanakan fungsi mengklik butang untuk membuka dan mengklik butang tutup untuk menutup kotak modal. Anda boleh menyesuaikan dan memanjangkan gaya dan interaksi kotak modal mengikut keperluan anda sendiri. Semoga artikel ini bermanfaat kepada anda. 🎜🎜Pautan rujukan: 🎜🎜🎜 dokumentasi rasmi jQuery: https://api.jquery.com/🎜🎜Animasi CSS: https://www.w3schools.com/css/css3_animations.asp🎜🎜Atas ialah kandungan terperinci HTML, CSS dan jQuery: Bina modal yang cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!
Alat AI Hot
Undresser.AI Undress
Apl berkuasa AI untuk mencipta foto bogel yang realistik
AI Clothes Remover
Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.
Undress AI Tool
Gambar buka pakaian secara percuma
Clothoff.io
Penyingkiran pakaian AI
AI Hentai Generator
Menjana ai hentai secara percuma.
Artikel Panas
Alat panas
Notepad++7.3.1
Editor kod yang mudah digunakan dan percuma
SublimeText3 versi Cina
Versi Cina, sangat mudah digunakan
Hantar Studio 13.0.1
Persekitaran pembangunan bersepadu PHP yang berkuasa
Dreamweaver CS6
Alat pembangunan web visual
SublimeText3 versi Mac
Perisian penyuntingan kod peringkat Tuhan (SublimeText3)
Topik panas
1378
52
Cara Menulis Garis Pecah Di Bootstrap
Apr 07, 2025 pm 03:12 PM
Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.
Cara memasukkan gambar di bootstrap
Apr 07, 2025 pm 03:30 PM
Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.
Cara mengubah saiz bootstrap
Apr 07, 2025 pm 03:18 PM
Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-
Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras
Apr 08, 2025 pm 07:05 PM
HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.
Cara Menyiapkan Kerangka untuk Bootstrap
Apr 07, 2025 pm 03:27 PM
Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.
Cara menggunakan bootstrap di vue
Apr 07, 2025 pm 11:33 PM
Menggunakan bootstrap dalam vue.js dibahagikan kepada lima langkah: Pasang bootstrap. Import bootstrap di main.js. Gunakan komponen bootstrap secara langsung dalam templat. Pilihan: Gaya tersuai. Pilihan: Gunakan pemalam.
Cara menggunakan butang bootstrap
Apr 07, 2025 pm 03:09 PM
Bagaimana cara menggunakan butang bootstrap? Perkenalkan CSS bootstrap untuk membuat elemen butang dan tambahkan kelas butang bootstrap untuk menambah teks butang
Cara melihat tarikh bootstrap
Apr 07, 2025 pm 03:03 PM
Jawapan: Anda boleh menggunakan komponen pemetik tarikh bootstrap untuk melihat tarikh di halaman. Langkah -langkah: Memperkenalkan rangka kerja bootstrap. Buat kotak input pemilih Tarikh dalam HTML. Bootstrap secara automatik akan menambah gaya kepada pemilih. Gunakan JavaScript untuk mendapatkan tarikh yang dipilih.
