Làm thế nào để tạo ra một phương thức popup sử dụng javascript và CSS

Question

Trên thực tế, hai câu hỏi:

• Làm thế nào tôi có thể tạo một popup modal với màu nền của màu xám?
• Ngoài ra tôi cần tạo màu nền bìa chỉ cho chính bảng. Không phải trang tổng thể.

Làm cách nào để thực hiện điều này bằng javascript và css?

Answer 1

Đây là HTML, có thể được chèn vào với JS và các kiểu phải nằm trong biểu định kiểu bên ngoài.

<div style="background: gray; width: 200px; height: 200px; position: absolute; left: 50%; top: 50%; margin-left: -100px; margin-top: -100px" id="modal">I'm a modal</div> 

Sau đó, bạn có thể tận dụng jQuery để hiển thị nó.

$('a.modal').bind('click', function(event) { 
    event.preventDefault(); 
    $('#modal').fadeIn(800); 
}); 

Đây chỉ là khởi đầu, bạn sẽ muốn học hỏi từ điều này và xây dựng dựa trên nó. Ví dụ: tập lệnh phải kiểm tra is(':hidden') và hiển thị và nếu không thì fadeOut(800) hoặc tương tự.

Answer 2

tôi sử dụng này cho các mặt nạ mà ngồi trên đỉnh của màn hình

.Mask { 
    display: none; 
    width: 100%; 
    height: 100%; 
    z-index: 9000; 
    padding: 0px; 
    margin: 0px; 
    background: transparent url(http://i.imgur.com/0KbiL.png); 
    position: fixed; 
    top: 0px; 
    overflow: hidden; 
}