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:

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.

Trả lời

Thư điện tử của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *