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

#1

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.

#2

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.

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>
83% thành viên diễn đàn không hỏi bài tập, còn bạn thì sao?