Diễn đàn Arduino Việt Nam | Tôi yêu Việt Nam
Hãy cùng đăng nhập hoặc đăng ký vào diễn đàn để cập nhật những bài viết mới và mở hết chức năng của diễn đàn nào!

Share
Go down
avatar
Administrator
Administrator
Tổng số bài gửi : 181
Points : 504
Reputation : 82
Join date : 20/07/2016
Age : 18
Đến từ : Bến Tre
Xem lý lịch thành viênhttp://vidieukhien-vn.webnode.vn/

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

on Mon Dec 19, 2016 8:31 pm
Message reputation : 100% (1 vote)
Modal window được sử dụng rất nhiều trong các trang web vì những 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.

Bắt đầu nhé:

HTML

Bạn cần tạo khung html như sau:


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

Để xuất hiện pop up bạn chèn link như sau:
Code:
<a href="#openModal">Open Modal</a>

CSS

Sau đó, chúng ta làm hiệu ứng và làm cho nó xuất hiện modal window với dạng như sau:
Code:
.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; }
Về Đầu Trang
Permissions in this forum:
Bạn không có quyền trả lời bài viết
Free forum | © phpBB | Free forum support | Liên hệ | Report an abuse | Free blog