Membuat Lightbox HTML Tanpa JavaScript

Lightbox ialah satu alat reka bentuk web yang menampilkan kotak kecil berisi imej atau teks di tengah skrin bila pautan diklik. Kebanyakan contoh memerlukan JavaScript, tetapi anda boleh mencipta kesan lightbox hanya dengan HTML dan CSS.

Langkah 1: Menambah Kod CSS

Mulakan dengan editor teks seperti Notepad atau TextEdit. Tambahkan kod CSS dalam bahagian <head> laman anda. Mulakan dengan tag <style> dan masukkan kod berikut:

.black_overlay{
    display:none;
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    background-color:black;
    z-index:1001;
    opacity:0.8;
}
.white_content{
    display:none;
    position:absolute;
    top:25%;
    left:25%;
    width:50%;
    height:50%;
    padding:16px;
    border:16px solid orange;
    background-color:white;
    z-index:1002;
    overflow:auto;
}

Pastikan tutup tag dengan </style>.

Langkah 2: Menambah Kandungan Lightbox

Masukkan teks atau elemen HTML apa saja ke dalam <body> yang ingin dipaparkan dalam lightbox, contohnya:

Testing...Texting

Gantikan teks tersebut dengan kandungan anda.

Langkah 3: Menambah Butang Penutup

Di dalam kandungan lightbox, letakkan butang atau pautan "Close" yang memanggil fungsi untuk menyembunyikan overlay. Contoh:

<a href="javascript:void(0);" onclick="document.querySelector('.black_overlay').style.display='none';document.querySelector('.white_content').style.display='none';">Close</a>

Langkah 4: Membuat Pautan untuk Lightbox

Tambahkan pautan di mana anda mahu lightbox muncul, contoh:

<a href="javascript:void(0);" onclick="document.querySelector('.black_overlay').style.display='block';document.querySelector('.white_content').style.display='block';">Klik di sini</a>

Simpan fail anda dan lightbox telah siap.

Tip

Integrasikan lightbox ke dalam bahagian laman anda, sangat sesuai untuk menampilkan gambar atau video.

URL:https://ms.whycomputer.com/internet/1015007205.html

Cara Meningkatkan CPM Anda

Bagaimana Cara Memeriksa Pemberi Perkhidmatan Internet (ISP) Saya

Internet

Panduan Menyediakan Label CD di Mac

Menyiapkan Label CD di Mac Menetapkan label CD kini bukan lagi kerja eksklusif syarikat muzik atau pereka grafik. Dengan semakin ramai orang menyimpan fail sandaran, senarai muzik tersuai, dan dokumen penting di dalam CD, membezakan setiap cakera menjadi keperluan penting. Berikut ialah panduan lang

Cara Membuat Laman Web Matematik Profesional

PengenalanLaman web matematik bukan sahaja tempat rujukan, ia juga platform interaktif untuk berkongsi pengetahuan, memudahkan belajar dan latihan. Dengan beberapa perancangan dan alat yang betul, anda boleh menghasilkan laman web yang mudah diakses, menarik, dan lengkap.Langkah 1: Pilih Pelayan dan

Cara Membuat Laman Web Politik

Cara Membuat Laman Web Politik Adakah anda ingin menjadi pendapat? Atau adakah anda berpendapat bahawa keputusan majlis bandaraya anda amat buruk? Anda mungkin mahu membuat laman web untuk memaklumkan orang ramai atau sekadar mengungkapkan ketidakpuasan anda terhadap sistem politik. Internet memberi

Internet