Tạo modal popup bằng html5 và css3

Modal boxes được sử dụng thường xuyên của các nhà phát triển website.
* Sử dụng modal popup trong những trường hợp như là:
- Mẫu đăng kí, đăng nhập.
- Quảng cáo.
- Thông báo cho người dùng.
Làm thế nào để tạo ra được modal popup.
Bước 1:

<a href="#openModal">Open Modal</a>

<div id="openModal" class="modalDialog">
 <div>
  <a href="#close" title="Close" class="close">X</a>
  <h2>Modal Box</h2>
  <p>This is a sample modal box that can be created using the powers of CSS3.</p>
  <p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
 </div>
</div>

- Thẻ a ở đây có tác dụng, khi mà bạn click (:target) vào thì nó sẽ hiển thị cái modal div ngay bên dưới nó.
- Thẻ div có id như là một hook, tạo mối liên hệ với thẻ a ở trên.
Bước 2:
Tạo kiểu cho box modal popup:

.modalDialog {
 position: fixed;//đảm bảo ở vị trí cố định khi scroll
 font-family: Arial, Helvetica, sans-serif;
 top: 0;//
 right: 0;
 bottom: 0;
 left: 0;
 background: rgba(0,0,0,0.8);
 z-index: 99999;// đảm bảo modal popup nổi lên trên nhất.
 opacity:0;
 -webkit-transition: opacity 400ms ease-in;// chuyển đổi màu sắc background
 -moz-transition: opacity 400ms ease-in;
 transition: opacity 400ms ease-in;
 pointer-events: none;
}

Bước 3:
Tạo chức năng popup.
Thêm một :target (lớp giả có trong css3 dành cho các phần thử) , nó tương đương với sự kiện khi click vào phần tử (có móc nối id hook) thì sẽ gọi đến phần tử có class:target{}.

.modalDialog:target {
 opacity:1;
 pointer-events: auto;
}

.modalDialog > div {
 width: 400px;
 position: relative;
 margin: 10% auto;
 padding: 5px 20px 13px 20px;
 border-radius: 10px;
 background: #fff;
 background: -moz-linear-gradient(#fff, #999);
 background: -webkit-linear-gradient(#fff, #999);
 background: -o-linear-gradient(#fff, #999);
}

Bước 4:
Tạo nút đóng modal popup.

.close {
 background: #606061;
 color: #FFFFFF;
 line-height: 25px;
 position: absolute;
 right: -12px;
 text-align: center;
 top: -10px;
 width: 24px;
 text-decoration: none;
 font-weight: bold;
 -webkit-border-radius: 12px;
 -moz-border-radius: 12px;
 border-radius: 12px;
 -moz-box-shadow: 1px 1px 3px #000;
 -webkit-box-shadow: 1px 1px 3px #000;
 box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #00d9ff; }