Tôi làm cách nào để đặt quảng cáo vào trình chiếu bật lên javascript css div, cho dù độ phân giải màn hình là bao nhiêu?

Tôi có mã sau mở một cửa sổ popup mới trong khi vô hiệu hóa nền, vấn đề là tôi phải đặt vị trí này sao cho nó cách 100px từ đầu (đã có thông qua CSS #dialog) và cũng ở giữa màn hình, bất kể độ phân giải của người dùng là gì?Tôi làm cách nào để đặt quảng cáo vào trình chiếu bật lên javascript css div, cho dù độ phân giải màn hình là bao nhiêu?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html> 
<head> 
    <script type="text/javascript"> 
     function showPopUp(el) { 
      var cvr = document.getElementById("cover") 
      var dlg = document.getElementById(el) 
      cvr.style.display = "block" 
      dlg.style.display = "block" 
      if (document.body.style.overflow = "hidden") { 
       cvr.style.width = "1024" 
       cvr.style.height = "100%" 
      } 
     } 
     function closePopUp(el) { 
      var cvr = document.getElementById("cover") 
      var dlg = document.getElementById(el) 
      cvr.style.display = "none" 
      dlg.style.display = "none" 
      document.body.style.overflowY = "scroll" 
     } 
    </script> 
    <style type="text/css"> 
     #cover { 
      display:  none; 
      position:  absolute; 
      left:   0px; 
      top:   0px; 
      width:   100%; 
      height:   100%; 
      background:  gray; 
      filter:   alpha(Opacity = 50); 
      opacity:  0.5; 
      -moz-opacity: 0.5; 
      -khtml-opacity: 0.5 
     } 

     #dialog { 
      display: none; 
      left:  100px; 
      top:  100px; 
      width:  300px; 
      height:  300px; 
      position: absolute; 
      z-index: 100; 
      background: white; 
      padding: 2px; 
      font:  10pt tahoma; 
      border:  1px solid gray 
     } 
    </style> 
</head> 
<body> 
<div id="cover"></div> 
<div id="dialog"> 
    My Dialog Content 
    <br><input type="text"> 
    <br><input type="button" value="Submit"> 
    <br><a href="#" onclick="closePopUp('dialog');">[Close]</a> 
</div> 
<a href="#" onclick="showPopUp('dialog');">Show</a> 

</body> 
</html>

Nguồn

2012-06-13 user1227914

Vui lòng định dạng mã của bạn đúng cách để có thể đọc được. Tôi đã làm nó cho bạn lần này. Ngoài ra, tôi nhận thấy bạn không có bất kỳ dấu chấm phẩy (';') trong mã JavaScript của bạn, đó là thực hành rất xấu! Mỗi câu lệnh phải được chấm dứt bằng dấu chấm phẩy. –

CSS dựa giải pháp cho trung tâm:

Bạn cần phải sử dụng những phong cách để làm cho nó xuất hiện dead-trung tâm:

position:absolute; 
top:50%; 
left:50%; 
width:400px; /* adjust as per your needs */ 
height:400px; /* adjust as per your needs */ 
margin-left:-200px; /* negative half of width above */ 
margin-top:-200px; /* negative half of height above */

Vì vậy position nên được chỉ định. top và left phải là 50%. Các margin-left và margin-top phải âm một nửa chiều rộng và chiều cao của hộp tương ứng.

Lưu ý rằng nếu bạn muốn cửa sổ bật lên xuất hiện ở giữa ngay cả khi trang được cuộn, bạn sẽ phải sử dụng position:fixed thay vì vẽ lại rằng nó không hoạt động trong IE6.

Nguồn

2012-06-13 19:16:50 Sarfraz

Giải pháp tuyệt vời! Đã không thấy cái đó trước đây. – marlar

mã rất đẹp đã cứu tôi nhiều thời gian +1 từ tôi! :-) – www139

Tìm kiếm nhanh trên Google được tìm thấy this;

function PopupCenter(pageURL, title,w,h) { 
    var left = (screen.width/2)-(w/2); 
    var top = (screen.height/2)-(h/2); 
    var targetWin = window.open (pageURL, title, 'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=no, resizable=no, copyhistory=no, width='+w+', height='+h+', top='+top+', left='+left); 

}

Nguồn

2012-06-13 19:15:15

Đơn giản, margin: 100px auto;. Không cần phải thực hiện các phép tính trong JavaScript.

Live Example

Nguồn

2012-06-13 19:15:58

Anh ta đang lấy về hộp bật lên để xuất hiện trong hộp đèn kinda trung tâm không phải là một hộp chứa hoặc một số yếu tố bao bọc – Sarfraz

@Sarfraz: Làm thế nào để giảm giá trị của câu trả lời của tôi? là 'margin' một tài sản được lưu giữ cho các thùng chứa chỉ? 'margin: auto' là một ** kỹ thuật ** để định tâm một phần tử trong phần tử cha của nó. –

Những gì bạn cần được gọi là light-box.

Để tạo nó, bạn nên sửa đổi mã HTML, CSS và JS.

Giả sử hộp đèn của bạn chỉ bao gồm chuỗi "biểu mẫu đăng nhập". (Bạn có thể đặt tất cả mọi thứ bạn muốn có) Mã HTML sẽ trông như thế này:

<div id = "loginBox">login form</div>

Bây giờ, chúng ta cần phải giấu nó với CSS:

div#loginBox { 
    display: none; 
}

Lúc này cái hộp của chúng tôi là không nhìn thấy được. Hãy sửa đổi hộp của chúng tôi khi bạn muốn nó cách 100px từ trên cùng:

div#loginBox { 
    display: none; 
    top: 100px; 
}

Chúng tôi sẽ lo lắng về việc vô hiệu hóa nền sau.

Công việc tiếp theo của chúng tôi là tạo nút sẽ hiển thị hộp khi cần. Easy-peasy:

<div id = "loginBox" >login form</div> 
<a id = "displayButton">login</a>

Lưu ý rằng chúng tôi không cần thuộc tính "href", vì điều này sẽ di chuyển màn hình khi nhấp và hành vi không mong muốn khác.

Hãy đính kèm xử lý sự kiện vào nút qua JS:

var IE = document.all ? true : false; // obligatory "browser sniffing" 

function display_box() { 
    document.getElementsById("loginBox").style.display = "inline-block"; // or "inline" 
} 

window.onload = function() { 
    var login_box = document.getElementsById("loginBox"); 
    if (!IE) { 
     login_box.addEventListener("click", display_box , false); 
    } 
    else { 
     login_box.attachEvent("onclick", display_box); 
    } 
}

Nhưng bạn muốn nó được ở trung tâm của màn hình?Sau đó, chức năng sẽ diễn ra như sau:

function display_box() { 
    var theBox = document.getElementsById("loginBox").style, 
     left = document.width/2 - 50; // 150 because it is 300/2 

    theBox.display = "inline-block"; 
    theBox.left = left.toString() + "px"; 
}

Tôi đoán bạn sẽ muốn đóng cửa sổ tại một số điểm và tạo hiệu ứng "nền bị tắt". Để làm như vậy bạn có thể tạo một lớp div mở rộng trên toàn bộ màn hình, đính kèm một sự kiện "hiển thị" trên đó, đặt một số chỉ mục z vào css để chắc chắn rằng loginBox nằm trên "nền bị vô hiệu hóa" và đính kèm " đóng loginBox "sự kiện trên" nền "div. Và bây giờ là mã cuối cùng trông như thế này:

Lưu ý rằng chúng tôi chỉ quan tâm đến vị trí của login-button, bởi vì người kia đang ẩn khỏi tầm nhìn, và sau đó được sửa đổi bởi JS:

HTML:

<div id = "loginBox" >login</div> 
<a id = "displayButton">login</a> 
<div id = "backgroundDarkener"> </div>

CSS:

div#loginBox { 
    display: none; 
    top: 100px; 
    width: 300px; #it is important to know the width of the box, to center it correctly 
    z-index: 2; 
} 
div#backgroundDarkener { 
    background: #000; 
    display: none; 
    position: fixed; 
    top: 0px; 
    left: 0px; 
    width: 100%; 
    height: 100%; 
    z-index: 1; 
    opacity: 0.8; 
    # needless to say, you should play with opacity or if you want your 
    # css to validate - background image (because I suspect it won't 
    # validate for old versions of IE, Safari, etc.) This is just a suggestion 
}

JS:

var IE = document.all ? true : false; // obligatory "browser sniffing" 

function display_box() { 
    var theBox = document.getElementsById("loginBox").style, 
     background = document.getElementsById("loginBox").style, 
     left = document.width/2 - 150; // 150 is 300/2 

    theBox.display = "inline-block"; 
    theBox.left = left.toString() + "px"; 
    background.display = "inline-block"; 
} 
function hide_box() { 
    document.getElementsById("loginBox").style.display = "none"; 
    document.getElementsById("backgroundDarkener").style.display = "none"; 
} 

window.onload = function() { 
    var login_box = document.getElementsById("loginBox"), 
     background = document.getElementsById("backgroundDarkener"); 

    if (!IE) { 
     login_box.addEventListener("click", display_box , false); 
     background.addEventListener("click", hide_box , false); 
    } 
    else { 
     login_box.attachEvent("onclick", display_box); 
     background.attachEvent("onclick", hide_box); 
    } 
}

Nguồn

2012-06-13 20:06:53 tsikov

Cảm ơn bạn, tôi sẽ nghiên cứu chi tiết :) – user1227914

Bạn rất hoan nghênh. Đừng ngần ngại yêu cầu làm rõ, tôi sẽ vui lòng giúp đỡ. – tsikov

Bạn cần phải sử dụng những phong cách để làm cho trung tâm div:

width:500px; 
left:0; 
right:0; 
margin:0 auto;

Nguồn

2014-05-27 06:11:27 lnegi

Đây là nơi flexbox đến giải cứu bây giờ!

.parent { 
    display: flex; 
    height: 300px; /* Or whatever */ 
} 

.child { 
    width: 100px; /* Or whatever */ 
    height: 100px; /* Or whatever */ 
    margin: auto; /* Magic! */ 
}

Nguồn

2015-02-09 19:26:06

Chỉ cần làm điều này:

.body { 
    position: relative; 
} 
.popup { 
    position: absolute; 
    max-width: 800px; 
    top: 50%; 
    left: 50%; 
    transform: translate(-50%, -50%); 
}

không vấn đề màn hình hoặc cửa sổ bật lên kích thước. Điều này sẽ tập trung vào <div class="popup"></div>.

Nguồn

2016-02-18 15:42:12

Tôi làm cách nào để đặt quảng cáo vào trình chiếu bật lên javascript css div, cho dù độ phân giải màn hình là bao nhiêu?

Trả lời

Các vấn đề liên quan