30/09/2018, 23:02

Cách tạo Popup box và dàn trang như facebook, phimvnz.com?

Mình đang tập thiết kế giao diện web,

Mình thấy cách mở dạng Popup rất hay, nhờ các bạn cho biết tên của kiểu thiết kế này là gì, và chia sẻ tài liệu hướng dẫn cách dàn trang.

Ví dụ trang phimvnz.com, khi mở một phim ở trang chủ, thì sẽ có Popup hiện lên, chỉ hiển thị phần xem phim và comment, cùng một số thông tin khác. Cũng link đó nếu mở ở cửa sổ mới thì sẽ load toàn bộ từ head, body, cho tới footer.

Võ Hoài Nam viết 01:10 ngày 01/10/2018

Mình chưa hiểu rõ lắm về cái thiết kế bạn nói. Bạn có thể chụp hình rõ hơn được không?

Theo cách mình hiểu vụ popup bạn nói là một Dialog nó hiện lên, phần background sẽ được làm mờ đi. Giống như những thiết kế ở trang này.

Web Design Pop up Inspiration

Discover recipes, home ideas, style inspiration and other ideas to try.

Nếu như cách mình hiểu, thì bạn tạo một vùng màu đen với position: fixed để nó cố định trên màn hình. Sau đó, phần content của popup sẽ nổi lên.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Demo Popup</title>
    <style>
        body {
            padding: 0;
            margin: 0;
            background-color: #F2DDDE;
        }

        header {
            background-color: #212121;
            padding: 16px 32px;
        }

        header h1 {
            margin: 0;
            color: #fafafa;
        }

        article {
            padding: 16px 32px;
            margin: 16px 0;
            background-color: #fff;
        }

        .popup {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(33, 33, 33, .8);
        }

        .popup .popup-content {
            width: 320px;
            margin: 64px auto;
            padding: 16px 32px;
            text-align: center;
            color: #fafafa;
            background-color: #89ABE3;
        }
    </style>
</head>
<body>
    <header>
        <h1>Header</h1>
    </header>

    <main>
        <article>
            <h2>Content 1</h2>
        </article>
        <article>
            <h2>Content 2</h2>
        </article>
        <article>
            <h2>Content 3</h2>
        </article>
    </main>

    <div class="popup">
        <div class="popup-content">
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse vehicula vulputate eleifend. Donec interdum interdum ultricies. Donec et quam eget massa posuere tempus congue quis elit. Sed consectetur magna pellentesque facilisis efficitur. Morbi fringilla dapibus metus, vel ullamcorper dui dignissim vitae. Integer semper rutrum congue. Praesent non vulputate leo, id sodales dolor. Proin sit amet bibendum metus, vitae vulputate orci. Nunc pharetra semper tincidunt.
            </p>
        </div>
    </div>
</body>
</html>

Bình luận về bài viết này

Chia sẻ tin đăng đến bạn bè

Gửi Messenger

Bài liên quan

quangha

0 chủ đề

0 bài viết

Tác giả nổi bật