Teya Salat

ChiaSeIT.Mobie.In

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.



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>


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 {
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);
}

.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; }


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

Download
Tạo modal window với HTML5 và CSS3 modal-window.zip (1.77KB)


Bình luận
Từ Khóa
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, , Tìm hiểu Tạo modal window với HTML5 và CSS3 làm theo và học hỏi , Bài viết Hot Tạo modal window với HTML5 và CSS3 ,
Cùng Chuyên Mục
Tạo hiệu ứng loading 7 sắc cầu vòng với CSS3
Tạo Login Form giống WordPress Admin với CSS3 và jQuery
Thiết kế mẫu đồng hồ đếm ngược cực ấn tượng với CSS3
Tạo Tooltip bằng CSS3
Tạo hiệu ứng cầu vòng tuyệt đẹp cho văn bản bằng CSS3
Hướng dẫn làm Form Login style Facebook đẹp
Share Hiệu ứng Preload với CSS3 Đẹp đầy màu sắc cực ảo
CSS3 Hiệu Ứng Loading Đẹp Windows 8 cho mọi Wap/Web
Làm thẻ Tiêu đề tự đổi màu với CSS
Tạo hiệu ứng đèn nhấp nháy với Notepad , CSS, JavaScript
Chia sẻ coding miễn phí © 2017
Thiết kế: Mạnh Tuân

2% sitemap.xml robots.txt U-ONC-STAT