Pernah mengalami tiba-tiba muncul popup window ketika klik iklan di website?
Untuk menyisipkan link didalam teks, ada salah satu tag html yang dapat digunakan yaitu <a href=""></a> dengan cara penggunaannya yaitu <a href="alamat_url">Teks yang ingin ditampilkan</a>.
Tag tersebut juga dapat dikombinasikan dengan target="_blank" agar link tersebut otomatis terbuka di tab baru ketika diklik. Adapun cara penggunaan target="_blank" yaitu <a href="alamat_url" target="_blank">Teks yang ingin ditampilkan</a>. Lalu bagaimanakah jika link yang diklik otomatis membuka window baru?
Berikut beberapa contoh untuk membuat link ataupun popup yang otomatis membuka di window browser baru.
Membuat button link dengan window baru, simpan dengan nama file buka_window_baru.html
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Membuat Popup Window menggunakan JavaScript</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head>
<body>
<input type="button" class="btn btn-primary" style="margin-top: 50px; margin-left: 50px; font-weight: bold;" value="Buka window baru" onclick="window.open('https://blog.octavianaanugrah.com/','popUpWindow','status=yes');">
</body>
</html>
Membuat button link window baru dengan ukuran yang telah ditentukan, simpan dengan nama file window_baru_dengan_ukuran.html
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Membuat Popup Window menggunakan JavaScript</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head>
<body>
<input type="button" class="btn btn-success" style="margin-top: 50px; margin-left: 50px; font-weight: bold;" value="Buka window baru dengan ukuran 500 x 300" onclick="window.open('https://blog.octavianaanugrah.com/','popUpWindow','width=500, height=300, status=yes');">
</body>
</html>
Membuat button link window baru dengan jarak atas dan kiri sesuai dengan yang ditentuan, simpan dengan nama file window_baru_dengan_jarak.html
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Membuat Popup Window menggunakan JavaScript</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head>
<body>
<input type="button" class="btn btn-warning" style="margin-top: 50px; margin-left: 50px; font-weight: bold;" value="Buka window baru dengan jarak atas 100 dan kiri 300" onclick="window.open('https://blog.octavianaanugrah.com/','popUpWindow','width=950, height=570, top=100, left=300, status=yes');">
</body>
</html>
Membuat link window baru, simpan dengan nama file link_popup.html
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Membuat Popup Window menggunakan JavaScript</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head>
<body style="margin-top: 50px">
<strong><a href="#" style="color: #0000FF; margin-left: 50px; margin-top: 50px;" onclick="window.open('https://blog.octavianaanugrah.com/','popUpWindow','status=yes');">Link Popup</a></strong>
</body>
</html>
Membuat link window baru dengan posisi di tengah-tengah, simpan dengan nama file popup_tengah.html
<!DOCTYPE html>
<html lang='en'>
<head>
<title>Membuat Popup Window menggunakan JavaScript</title>
<meta charset='utf-8'>
<meta name='viewport' content='width=device-width, initial-scale=1'>
<link rel='stylesheet' href='css/bootstrap.min.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js'></script>
<script src='js/bootstrap.min.js'></script>
</head>
<body style="margin-top: 50px">
<script language="javascript">
var popupWindow = null;
function center(url,winName,w,h,scroll) {
LeftPosition = (screen.width) ? (screen.width-w)/2 : 0;
TopPosition = (screen.height) ? (screen.height-h)/2 : 0;
settings = 'height='+h+',width='+w+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+',resizable'
popupWindow = window.open(url,winName,settings)
}
</script>
<strong><a href="https://blog.octavianaanugrah.com/" style="color: #0000FF; margin-left: 50px;" onclick="center(this.href,'myWindow','700','300','yes');return false">Popup Tengah</a></strong>
</body>
</html>
Download demo DISINI
Terima kasih telah membaca materi ini yang berjudul Membuat Popup Window menggunakan JavaScript dan jangan lupa bagikan melalui sosial media anda dengan klik icon yang berada dibawah judul materi ini.
Kritik dan saran silahkan kirim ke WhatsApp, Instagram atau Facebook.
