42
Tôi muốn làm sổ popup div thay vì cửa sổ popup cho 'về' hình ảnh/trang web của tôi với nút hiện tại như trong ví dụ này: 
HTML/CSS Popup div trên văn bản nhấp
A
Trả lời
127
DEMO
Trong khu vực nội dung, bạn có thể cung cấp bất cứ thứ gì bạn muốn hiển thị trong đó.
.black_overlay {
display: none;
position: absolute;
top: 0%;
left: 0%;
width: 100%;
height: 100%;
background-color: black;
z-index: 1001;
-moz-opacity: 0.8;
opacity: .80;
filter: alpha(opacity=80);
}
.white_content {
display: none;
position: absolute;
top: 25%;
left: 25%;
width: 50%;
height: 50%;
padding: 16px;
border: 16px solid orange;
background-color: white;
z-index: 1002;
overflow: auto;
}<html>
<head>
<title>LIGHTBOX EXAMPLE</title>
</head>
<body>
<p>This is the main content. To display a lightbox click <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">here</a>
</p>
<div id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a>
</div>
<div id="fade" class="black_overlay"></div>
</body>
</html>+10
Mã tuyệt vời, nhưng cả hai vị trí phải là 'cố định'. Nếu người dùng nhấp vào liên kết sau khi đã cuộn, cửa sổ lớp phủ và phương thức sẽ chuyển đến đầu trang. – Kasperi
+3
Đối với bất kỳ ai quan tâm, nếu bạn muốn lớp phủ "mở rộng quá khứ" chế độ xem (tức là chiếm toàn bộ trang) Đặt vị trí cần sửa. Điều này sẽ làm cho nó xuất hiện như thể toàn bộ trang có lớp phủ. – taylorcressy
14
Bạn chỉ có thể sử dụng jQuery UI Dialog
Ví dụ:
$(function() {
$("#dialog").dialog();
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>jQuery UI Dialog - Default functionality</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
</body>
</html>
7
Vì lợi ích của sự hoàn chỉnh, những gì bạn đang cố gắng để tạo ra một "cửa sổ modal".
Nhiều giải pháp JS cho phép bạn dễ dàng tạo chúng một cách dễ dàng, dành thời gian để tìm ra giải pháp phù hợp nhất với nhu cầu của bạn.
Tôi đã sử dụng Tinybox 2 cho các dự án nhỏ: http://sandbox.scriptiny.com/tinybox2/
câu hỏi yêu cầu mã sẽ hiển thị một ** tối thiểu ** hiểu biết về các vấn đề. Điều này có nghĩa là bạn sẽ phải bao gồm các giải pháp đã thử, tại sao chúng không hoạt động và kết quả mong đợi ** trong câu hỏi của bạn **. – Sumurai8
Bạn có thể sử dụng: Hiển thị các Chế độ jQuery: http://zurb.com/playground/reveal-modal-plugin –