1. Buat tombol atau elemen HTML yang akan memicu popup ketika diklik:
```html
Buka Popup
```
2. Tambahkan elemen div yang akan berisi iframe dalam popup:
```html
×
```
3. Tambahkan gaya CSS untuk popup dan iframe:
```css
.popup {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.7);
z-index: 1;
}
.popup iframe {
width: 80%;
height: 80%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
border: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}
.popup .close {
position: absolute;
top: 10px;
right: 20px;
font-size: 30px;
color: #fff;
cursor: pointer;
}
```
4. Tambahkan skrip JavaScript untuk menampilkan dan menyembunyikan popup saat tombol dibuka dan ditutup:
```javascript
// Fungsi untuk membuka popup
function openPopup() {
var popup = document.getElementById('popupContainer');
popup.style.display = 'block';
}
// Fungsi untuk menutup popup
function closePopup() {
var popup = document.getElementById('popupContainer');
popup.style.display = 'none';
}
// Tambahkan event listener untuk tombol "Buka Popup"
var openButton = document.getElementById('openPopup');
openButton.addEventListener('click', openPopup);
// Tambahkan event listener untuk tombol "Tutup" pada popup
var closeButton = document.getElementById('closePopup');
closeButton.addEventListener('click', closePopup);
```
5. Ketika tombol "Buka Popup" diklik, popup dengan iframe akan muncul. Ketika tombol "Tutup" pada popup diklik, popup akan ditutup.
Anda dapat menyesuaikan URL iframe dengan mengganti `src` pada elemen iframe. Pastikan Anda juga menyesuaikan gaya CSS dan tampilan popup sesuai dengan kebutuhan Anda. Cek Ke TKP -
http://dlvr.it/Sx9mmj
Tidak ada komentar:
Posting Komentar