Popup center màn hình
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.
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:
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. |