bagaimana cara menampilkan kepanjangan sebuah teks secara pop-up dalam halaman web?
Pertanyaan
1 Jawaban
-
1. Jawaban Amin1990
Pop Up merupakan sebuah jendela yang muncul pada halaman sebuah website pada saat user atau pengunjung membuka sebuah website, Auto Pop Up biasanya digunakan untuk memasang sebuah iklan-iklan yang terdapat pada website tersebut, nah pada pembahasan kali ini kita akan mebahas Cara Membuat Auto Pop Up Menggunakan HTML dan CSS, cara kerja dari Auto Pop up ini yaitu ketika pengunjung ingin mengunjungi sebuah halaman website, maka secara otomatis akan muncul sebuah jendela pop-up yang terdapat pada website tersebut.
Cara Membuat Auto Pop Up Menggunakan HTML dan CSS, langkah pertama kita akan membuat file html untuk strukturnya dan file CSS untuk mengatur layout atau tampilan dari pop up yang akan kita buat, tanpa berlama-lama kita yang pertama kita akan membuat file indexnya, dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama index.html
Cara Membuat Auto Pop Up Menggunakan HTML dan CSS Cara Membuat Auto Pop Up Menggunakan HTML dan CSS http://files.wacana.siap.web.id/content/uploads/2016/06/kursus-desain-jakarta.jpg" alt=""> closeSetelah kita membuat file index.html berikutnya kita akan membuat file CSS untuk mengatur layout atau tampilannya, dan silahkan teman-teman simpan script yang terdapat dibawah ini dengan nama style.css
*{margin: 0; padding: 0} @keyframes autopopup { from {opacity: 0;margin-top:-200px;} to {opacity: 1;} } #close { background-color: rgba(64, 68, 65, 0.5); position: fixed; top:0; left:0; right:0; bottom:0; animation:autopopup 3.5s; } #close:target { -webkit-transition:all 1s; -moz-transition:all 1s; transition:all 1s; opacity: 0; visibility: hidden; } @media (min-width: 768px){ .container-popup { width:30%; } } @media (max-width: 767px){ .container-popup { width:30%; } } .container-popup { position: relative; margin: 5% auto; padding: 4px 3px; background-color: #e1fff5; color: #333; border-radius: 8px; } .container-popup img { width: 100% } .close { position: absolute; top:3px; right:3px; background-color: #33898B; padding:7px 10px; font-size: 15px; text-decoration: none; line-height: 1; color:#fff; }