Tạo modal window với HTML5 và CSS3

Modal Window được sử dụng rất nhiều trong trang web vì sự hữu ích mà nó mang lại. Nó có thể giúp chúng ta hiển thị trang login/register form, hoặc mẫu quảng cáo nhỏ, đơn giản hơn là dòng thông báo dành cho người dùng trên website hay blog của mình. Hôm nay, mình sẽ chia sẻ cho các bạn thêm một đoạn code được viết hoàn toàn bằng HTML5 và CSS3 mà không dùng bất kì đoạn script nào. Ngoài ra , các bạn cũng có thể tham khảo thêm bài viết mà mình đã post trước đây.

Xem Demo | Download

HTML

Trước hết là các bạn cần tạo modal window với khung chuẩn html như sau.

<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>

Và để làm xuất hiện pop up, các bạn chỉ việc chèn link như sau:

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

CSS

Sau đó, chúng ta sẽ tiến hành tạo hiệu ứng và làm xuất hiện modal window với đoạn css sau:

.modalDialog {
		position: fixed;
		font-family: Arial, Helvetica, sans-serif;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background: rgba(0,0,0,0.8);
		z-index: 99999;
		opacity:0;
		-webkit-transition: opacity 400ms ease-in;
		-moz-transition: opacity 400ms ease-in;
		transition: opacity 400ms ease-in;
		pointer-events: none;
	}

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

.modalDialog > div {
		awidth: 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);
	}

.close {
		background: #606061;
		color: #FFFFFF;
		line-height: 25px;
		position: absolute;
		right: -12px;
		text-align: center;
		top: -10px;
		awidth: 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; }

Chúc các bạn thành công !

Chuyên Mục: Css, HTML5

Bài viết được đăng bởi webmaster