Vị trí mặc định của popup sẽ mở tùy vào từng trình duyệt khác nhau, việc điều chỉnh vị trí sẽ đơn giản hơn với plugin ở rộng sau đây.
Tóm Tắt
Popup với vị trí giữa màn hình
Sử dụng vài đoạn code JS đơn giản, lấy chiều cao và chiều rộng của màn hình window trừ cho chiều cao và chiều rộng của popup và chia cho 2, sử dụng kết quả này cho vị trí, ta sẽ được popup với vị trí giữa màn hình.
Html viết:
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>Học Web Chuẩn</title> <script> function popup(url,w,h) { var name = 'popup'; var wWin = window.innerWidth; var hWin = window.innerHeight; var top = (hWin-h)/2; var left = (wWin-w)/2; var popupWindow = window.open(url, name, 'width='+ w + ', height=' + h + ', status=no, location=no, toolbar=no, scrollbars=yes, menubar=no, resizable=no, left=' + left +', top='+top ); popupWindow.focus(); return false; } </script> <style> * {/* reset lại margin và padding cho các tag */
margin: 0; padding: 0; } </style> </head> <body><p><a href="popup.html" onClick="return popup(this.href,'400','300')">Click mở Popup</a></p>
</body> </html>
Hiển thị trình duyệt:
Click mở Popup center
Download file để thực hành
Thuộc tính điều khiển popup
Thuộc tính
Giá trị
Mô tả
width
đơn vị
Chiều rộng cửa sổ popup.
height
đơn vị
Chiều cao cửa sổ popup.
status
yes / no
Ẩn hiện trạng thái.
location
yes / no
Ẩn hiện phần location.
toolbar
yes / no
Ẩn hiện toolbar.
scrollbars
yes / no
Ẩn hiện thanh scrollbars.
menubar
yes / no
Ẩn hiện thanh menu
resizable
yes / no
Popup có resize hay không.
left
đơn vị
Canh trái cho popup.
top
đơn vị
Canh bên trên cho popup.