cara mudah membuat popup new window di javascript
Tuesday 26 January 2021
Edit
Nah atas dasari itulah UX sangat penting karena bagaimanapun juga pengguna merupakan tolak ukur apakah aplikasi sudah sesuai atau belum baik dari segi fungsi dan design, nah maka untuk mengatasi masalah tersebut anda bisa menggunakan modal popup (jika di bootstrap) atau bisa menggunakan popup windows di javascript.
terkait hal tersebut merupakan pilihan anda apakah mau menggunakan popup window javascript atau menggunakan modal popup bootstrap, pada kesempatan kali ini saya akan memberikan tutorial singkat membuat popup new window di javascript, tentu saja tujuannya untuk memper mudah user dan mengurangi proses bolak balik user dari form satu ke form yang lainnya.
dengan hal ini di harapkan bisa meningkatkan performa UX sehingga produktifitas pengguna meningkat, tentunya hal ini menjadi penting untuk keberlangsungan sistem yang anda buat. Maka dari itu perlu adanya perbaikan terkait sistem yang eksisting mengikuti kebutuhan dan analisa UX agar pengguna aplikasi nyaman dan anda bebas dari komplain.
Berikut ini adalah contoh source code membuat popup new window di javascript, silahkan anda copy dan pastekan kode di bawah ini kemudian simpan dengan nama popup-javascript.php di folder c:/xampp/htdocs (sesuaikan dengan web server package yang anda gunakan, karena saya menggunakan xampp sebagai web server package)
<html>
<head>
<title>Window Popup javascript</title>
</head>
<body>
<a href="https://www.hakkoblogs.com" onclick="centeredPopup(this.href,'myWindow','400','600','yes');return false">Centered Popup</a>
<br/><br/>
<a href="JavaScript:window.close()">Close</a>
</body>
<script language="javascript">
var popupWindow = null;
function centeredPopup(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>
</html>
setelah anda simpan kemudian anda panggil di browser dengan mengetikkan localhost/popup-javascript.php, jika berhasil maka anda akan mendapatkan halaman seperti gambar di bawah ini
Nah begitulah kira - kira tampilan popup new window di javascript, lebih mudah dan tentunya lebih simple juga bukan? jadi jika anda tidak ingin membuat popup modal di bootstrap atau mengalami kendala menggunakannya, popup new window javascript bisa menjadi solusi untuk membiuat popup pada aplikasi yang anda buat.
kesimpulannya dengan menggunakan popup new window javascript aplikasi web yang anda buat akan terasa seperti aplikasi dekstop disamping itu aplikasi juga akan sangan mudah digunakan oleh user karena mengurasi proses bolak balik user dari satu form ke form yang lainnya.
Semoga tutorial singkat ini bisa bermanfaat untuk anda yang membutuhkannya dan bisa menjadi solusi untuk anda yang sedang mencari cara popup window di javascript, jika ada pertanyaan atau sanggahan atau kritikan dan saran terkait postingan ini jangan sungkan untuk menuliskannya di komentar dan kita diskusikan.
Selamat Mencoba