Popup style (Addon)
Terdapat 2 popup style Design yang dapat kamu pasang untuk postingan anda agar setiap postingan anda menjadi elegan dengan "Popup Style" ini Popup Style 1 label ini untuk memanggil Popup anda <label aria-label='close' class='c…
Apakah "Popup style (Addon)" Berguna bagi anda?
Likes
Popup style (Addon)
Terdapat 2 popup style Design yang dapat kamu pasang untuk postingan anda agar setiap postingan anda menjadi elegan dengan "Popup Style" ini
Popup Style 1
label ini untuk memanggil Popup anda
<label aria-label='close' class='c flex center shrink fontMM' for='namaTitle'> Nama Title/SVG icon</label>
Dan ini Popup untuk label diatas
<section aria-label='namaTitle'>
<input class='hidden oPI' id='namaTitle' name='component' type='checkbox'/>
<div class='oP flex centerJ invisible'>
<div class='oPA flex relative'>
<div class='oPB'>
<div class='oPH flex centerA bgInherit fontD fontH'>
<span class='t fontW-600 ellips'>Nama Header</span>
<label aria-label='close' class='c flex center shrink fontMM' for='namaTitle'> </label>
</div>
<div class='oPC'>
<!--[ content anda disini ]-->
</div>
</div>
</div>
<!--[ for close pop-up ]-->
<label aria-label='close pop-up' class='fc' for='namaTitle'> </label>
</div>
</section>Popup ini sangat ringan dikarenakan menggunakan CSS yang tidak memberatkan Postingan anda
Berikut adalah Penjelasannya:- Pergi Ke Postingan
- Simpan Kode Diatas dipaling bawah Postingan anda
- Ubah nama yang ditandai sebagai Berikut:
for='namaTitle'berada pada Label Pemanggil dan Label Close- dan
id='namaTitle'pada Input
- Selesai
Nama Header
Content anda disini
Popup Style 2
label ini untuk memanggil Popup anda
<a aria-expanded='false' aria-haspopup='listbox' aria-label='Saved Posts' class='a flex op i20 extL' data-toggle-class-on-target='active' data-toggle-escape='' data-toggle-outside='' data-toggle-target='#dialog_title' href='javascript:;' id='button_dialog_title' itemprop='url'> Demo Popup style 2</a>
Dan ini Popup untuk button diatas
<div aria-hidden='false' class='elcreative_dialog' data-toggle-state='false' id='dialog_title' role='listbox'>
<div class='dialog_container'>
<div class='dialog_header'>
<span class='dialog_title'>Nama Title</span>
<button aria-label='Close' class='button_close_dialog relative inline-flex shrink-0 grow-0 cursor-pointer appearance-none items-center justify-center overflow-hidden rounded-full bg-transparent p-2 text-colorMeta hover:bg-colorTextTrans1 focus:bg-colorTextTrans1 active:bg-colorTextTrans2 ltr:ml-2 rtl:mr-2 dark:text-colorColorModeDarkText dark:hover:bg-colorColorModeDarkTextTrans1 dark:focus:bg-colorColorModeDarkTextTrans1 dark:active:bg-colorColorModeDarkTextTrans2' data-toggle-trigger-off='#dialog_title' data-toggle-target='#dialog_title' title='Close' type='button'><svg aria-hidden='true' fill='currentColor' height='24' viewBox='0 0 24 24' width='24'><path d='M19,6.41L17.59,5L12,10.59L6.41,5L5,6.41L10.59,12L5,17.59L6.41,19L12,13.41L17.59,19L19,17.59L13.41,12L19,6.41Z' /></svg></button>
</div>
<div class='dialog_content flex flex-col'>
contentmu disini
</div>
</div>
</div>Popup ini sangat ringan dikarenakan menggunakan CSS yang tidak memberatkan Postingan anda
Berikut adalah Penjelasannya:- Pergi Ke Postingan
- Simpan Kode Diatas dipaling bawah Postingan anda
- Ubah nama yang ditandai sebagai Berikut:
data-toggle-target='#dialog_title'dandata-toggle-trigger-off='#dialog_title'berada pada Label Pemanggil dan Button Close- dan
data-toggle-target='#dialog_titledanid='button_dialog_title'pada Button Pemanggil
- Selesai
Nama Title
contentmu disini
Gabung dalam percakapan