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
Trả lời
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>
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
Đố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
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>
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/
- 1. Fill div với văn bản
- 2. Thêm div động trên nhấp chuột
- 3. Đặt tiêu điểm trên điều khiển nhập văn bản của Popup
- 4. Kéo thả văn bản qua DIV
- 5. Hiển thị số div dựa trên tìm kiếm văn bản
- 6. CSS - Văn bản mờ đục trên div độ mờ thấp?
- 7. div trong suốt trên hình ảnh nhưng văn bản mờ
- 8. Làm thế nào để xóa văn bản trên nhấp chuột?
- 9. Không thể liên kết với sự kiện nhấp chuột trên tờ rơi Leaflet popup
- 10. Xóa văn bản sau khi nhấp vào hộp văn bản
- 11. chọn tất cả văn bản trong một div trên một nhấp chuột trái duy nhất với javascript
- 12. mở WPF Popup trên TextBox tập trung
- 13. Dừng nhấp chuột thay đổi từ văn bản đánh dấu
- 14. Gói văn bản quanh div với CSS
- 15. scrapy - cách lấy văn bản từ 'div'
- 16. văn bản chảy ra khỏi div
- 17. cách ẩn con trỏ nhấp nháy trong văn bản nhập?
- 18. window.open popup bị chặn trong khi sự kiện nhấp chuột
- 19. Bản đồ hình ảnh: Nhấp để echo/in văn bản trên màn hình
- 20. đặt lại vị trí div dựa trên vị trí nhấp
- 21. thực thi mã serverside trên div nhấp chuột
- 22. Chọn văn bản giống như "Ctrl + A" khi nhấp vào văn bản?
- 23. Popup Không bao giờ đóng
- 24. Jquery: có cách nào để làm nổi bật văn bản của Div khi bạn nhấp vào nó không?
- 25. nhấp chuột bên ngoài DIV
- 26. CSS toàn màn hình div với văn bản ở giữa
- 27. Đặt hình nền trên văn bản?
- 28. Ngăn việc chọn văn bản sau khi nhấp đúp vào
- 29. Sao chép văn bản của vùng văn bản vào div có ngắt dòng
- 30. Xác định dấu mũ/Lựa chọn bên trong DIV, Hộp văn bản, Văn bản, v.v.
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 –