Hướng dẫn tạo Modal Window Với HTML5 Và CSS3

Xem: 327    Tải: 0   Thảo luận: 0   Mục: HTML-CSS template   Lĩnh vực: Khác

9 điểm   ( 2 đánh giá ) File đã được kiểm thử

1 MEGA [megacode]huong-dan-tao-modal-window-voi.rar (1.77 KB)
Phí tải ~ 2,000 đ

Bạn cần phải Đăng nhập để tải file [megacode]huong-dan-tao-modal-window-voi.rar
Nếu bạn chưa có tài khoản thì Đăng ký miễn phí tại đây

Báo lỗi download   Báo vi phạm bản quyền

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.

Tổng đài hỗ trợ KT: (+844) 6. 32.979.36 - Hotline: 0969.091.265
Hỗ trợ KT từ: 8h-17h30 các ngày trong tuần trừ chiều T7, CN và các ngày lễ;
Hỗ trợ kỹ thuật (KT) và cam kết chất lượng:
1. Code đảm bảo chất lượng giống demo 100%
2. Hỗ trợ cài đặt code cho khách hàng
3. Hỗ trợ hướng dẫn sử dụng cho khách hàng
Mega download: 1 MEGA = 2.000đ

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.

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

Hướng dẫn tạo Modal Window Với HTML5 Và CSS3

Hướng dẫn tạo Modal Window Với HTML5 Và CSS3 Đăng ngày 28-09-2016  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. 4.5/10 327

Thảo luận:

Để bình luận bạn phải đăng nhập thành viên.

File tương tự

Files cùng mục

 

File tải nhiều nhất

Megacode.vn - Thư viện mã nguồn chia sẻ, tải file cho cộng đồng
Copyright © 2013-2016. All rights reserved. Bản quyền thuộc VinaGon
Địa chỉ: Số 38 Hàng Bè, Hàng Bạc, Hoàn Kiếm, Hà Nội.
Văn phòng giao dịch: Phòng 28, Tầng 6, HH1A Linh Đàm, Hoàng Mai, Hà Nội
Email: info@vinagon.com | Website: www.vinagon.com | Điện thoại: (+844) 6. 32.979.36;
logo megacode

Megacode đã đăng ký với Bộ Công Thương
Thư viện mã nguồn mở lớn nhất Việt Nam.



Hỗ trợ khách hàng trên Megacode
Hỗ trợ kỹ thuật cho thành viên:
Tổng đài: (+84) 246. 32.979.36
Số di động (Hotline): 0969.091.265
Thời gian làm việc:
Sáng: 8h-12h; Chiều: 13h30-17h30
(Nghỉ chiều T7, CN và các ngày lễ, tết)
Chat với Megacode
https://www.facebook.com/megacodevn