Cara Membuat Tombol Popup Sederhana dengan CSS dan Fungsi Href #

www.azid45.web.id - Cara Membuat Tombol Popup Sederhana dengan CSS dan Fungsi Href #. Pada kesemapatan kali ini saya akan membagikan fungsi href dengan simbol #. Ketika kita membuat fungsi <a href='#'>nama blog</a>, pada simbol # ini seharusnya adalah alamat yang akan di tuju atau link karena masih belum ada yang dituju maka di ganti dengan simbol #.

Tujuan simbol tersebut adalah agar ketika diklik tidak mengarah ke link yang lainnya. Bagaimaana kalo dibiarkan tanpa ada simbol #? umpama saja seperti ini <a href=''>nama link</a>. Tentunya pada postingan google akan mengisi secara otomatis kurang lebih akan menjadi <a href='https://blogger.com=null'>nama link</a> kurang lebih seperti itulah. Jika hal itu terjadi pastinya akan menjadi broken link dan membuat blog Anda tercemar di mata google.

Apakah simbol # pada fungsi href bisa dimanfaatkan? Jawabannya adalah bisa. Untuk memanfaatkan simbol # kita bisa menggunakan kode id untuk mengarahkannya. Kebanyakan fungsi href ini digunakan pada template Landing Page.

Misal pada menu header ada tulisan Download dengan funsi href <a href='#download'>Download</a> dan pada template Landing Page di area footer terdapat area untuk download. Untuk mengarahkan ke area download tersebut kita tinggal buat kode

<div id='download'> <!--pembuka kode-->
Area download disini
</div><!--penutup kode-->

Fungsi href ini juga bisa digunkan untuk tombol popup. Untuk membuatnya kita butuh kode CSS agar tampilannya lebih menarik dan menjadi popup

Misal saja kita ingin buat popup dengan simbol # dan tulisan popup untuk mengidentitaskan simbol tersebut maka kode CSS-nya seperti ini

Kode CSS Popup

#popup {
display:none;
visibility: hidden;
opacity: 0;
position:absolute;
margin:0;
}

Ketarangan

display:none, opacity:0, dan visibility:hidden adalah kode untuk menyembunyikan konten yang akan dijadikan popup.

Ketika kita klik popup tersebut agar bisa terlihat kita bisa menggunkkan kode CSS berikut

kode CSS target popup

#popup:target{
display:block;
visibility:visible;
opacity:1;
background-color:rgba(0,0,0,0.5);
position:fixed!important;
display:flex!important;
top:0;left:0;
right:0;
bottom:0;
margin:0;
width:100%;
height:100%;
overflow-y:auto;
padding:10px 0;
z-index:99999999999;
-webkit-transition:.2s;
-moz-transition:.2s;
transition:.2s
}

Keterangan

display:block, opacity:0, dan visibility:visible adalah kode untuk menampilkan konten yang akan muncul menjadi popup

untuk kode HTML nya sebagai pemanggil CSS nya adalah seperti ini

<a href='#popup' target='_top'>popup</a>

dan kode HTML targetnya adalah seperti ini

<div id='popup'>
<a href='#close'>Tutup popup</a>
Isi konten yang akan dijadikan popup
</div>

Keterangan

kode <a href='#close'>Tutup popup</a> harus ada, karena jika tidak ada Anda tidak akan bisa menutup isi konten yang Anda buat popup

Contoh penggunaan fungsi href # untuk popup

Kode CSS

#popup {display:none;visibility: hidden;opacity: 0;position:absolute;margin:0;}
#popup:target{display:block;visibility:visible;opacity:1;background-color:rgba(0,0,0,0.5);position:fixed!important;display:flex!important;top:0;left:0;right:0;bottom:0;margin:0;width:100%;height:100%;overflow-y:auto;padding:10px 0;z-index:99999999999;-webkit-transition:.2s;-moz-transition:.2s;transition:.2s}
.opo-wrap{margin: auto}
.opo{display:block;margin:auto;width:550px;max-width:100%;background:#fff;color:#333;padding:20px;overflow:auto;max-height:calc(100vh - 150px)}
.close{background:#fff;color:#333;padding:10px;margin:auto;text-align:center;}

Keterangan

margin: auto digunakan agar isi konten yang dijadikan popup di posisi tengah kalau secara default akan berada di kiri paling atas. max-height:calc(100vh - 150px) adalah kode yang bertujuan untuk membatasi tinggi isi konten popup, untuk ukuran 150px bisa menyesukaikan. overflow:auto adalah kode agar isi konten saat melebihi batas area layar bisa di scroll.

Kode HTML

<div id='popup'>
<div class='opo-wrap'>
<div class='close'><a href='#tutup'>Tutup Wae lah</a></div>
<div class='opo'>Opo iki
Opo iki<br/>
Opo iki<br/>
Opo iki<br/>
Opo iki<br/>
<br/>
Opo iki<br/>
Opo iki<br/>
Opo iki<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
Opo iki<br/>
Opo iki<br/>
Opo iki<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
Opo iki
Opo iki
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
Opo iki
</div>
</div>

</div>

Untuk lebih jelasnya terkait kode tersebut Anda bisa melihat demonya dibawah ini

Demo

Demikianlah tutorial terkakit Cara Membuat Tombol Popup Sederhana dengan CSS dan Fungsi Href #. Semoga bermanfaat.

NB:
Jangan dibully saya masih pemula, jadi penamaan atau istilah mungkin ada yang salah.