Cara Membuat Lightbox HTML Tanpa JavaScript

Lightbox adalah alat desain web yang menampilkan konten kecil—gambar, teks, dll.—di tengah layar ketika link diklik. Banyak cara membuatnya, umumnya memerlukan JavaScript. Namun, Anda bisa membuat efek lightbox hanya dengan HTML.

Langkah 1

Buka editor teks seperti Notepad atau TextEdit. Masukkan kode CSS di bagian <head> halaman Anda. Ketik <style type="text/css"> dan salin kode berikut:

.black_overlay{
    display: none;
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: black;
    z-index: 1001;
    -moz-opacity: 0.8;
    opacity: .80;
    filter: alpha(opacity=80);
}
.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;
}

Mulai blok CSS dengan </style> di akhir.

Langkah 2

Tambahkan konten yang ingin ditampilkan di lightbox di bagian <body>. Misalnya:

<div id="content" class="black_overlay">
    <div id="content" class="white_content">
        Testing...Texting
        <br/>
        <button id="closeBtn">Close</button>
    </div>
</div>

Langkah 3

Berikan tombol “Close” di dalam lightbox. Klik tombol ini akan menyembunyikan overlay.

Langkah 4

Buat tautan yang memicu lightbox, misalnya:

<a href="#" onclick="document.getElementById('content').style.display='block';return false;">Klik di sini</a>

Setelah klik, Anda sudah memiliki lightbox sederhana yang hanya menggunakan HTML dan CSS.

Tip

Integrasikan lightbox ke dalam bagian situs Anda. Sangat cocok untuk menampilkan gambar atau video.

URL:https://komputer.whycomputer.com/Internet/101307205.html

Cara Meningkatkan CPM

Bagaimana Cara Mengetahui ISP Anda?

Internet

Panduan Membuat Label CD di Mac

Membuat Label CD di Mac: Cara Mudah dengan Microsoft Word Menyiapkan label CD tidak lagi menjadi pekerjaan eksklusif perusahaan musik atau desainer grafis. Saat ini banyak orang menyimpan backup data, daftar musik kustom, serta dokumen penting di CD. Menggunakan label CD Avery standar memudahkan pem

Panduan Lengkap Membuat Situs Web Matematika

Situs web matematika merupakan cara sempurna untuk membantu orang lain, menyediakan tempat bagi pelajar berbagi catatan dan belajar, serta memungkinkan siapa pun belajar atau memperbarui keterampilan matematika. Situs ini dapat sesederhana atau sesulit apa pun yang Anda inginkan. Pastikan Anda menyi

Panduan Membuat Situs Web Politik

Panduan Membuat Situs Web Politik Ingin menjadi komentator politik atau menyuarakan kritik terhadap keputusan dewan kota? Dengan internet, siapa saja dapat menjadi jurnalis warga, menulis opini, atau sekadar mengutarakan frustrasi. Anda tidak perlu gelar ilmu politik atau menjadi kolumnis berserikat

Internet