30/09/2018, 17:57

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

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 HDonline.vn, 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.

http://hdonline.vn/

http://hdonline.vn/phim-ma-ca-rong-cuoi-cung-4030.html

vũ xuân quân viết 20:13 ngày 30/09/2018

anh tìm hiểu code của trang trên.
Popup thì dùng https://github.com/kswedberg/jquery-cluetip
Copy code của trang web trên để demo. Em có thể tham khảo.
Anh không làm giao diện nên không biết dàn trang. Anh chỉ làm web. Muốn làm cái này thì em phải biết html, css và javascript. Biết dùng jquery.

<!DOCTYPE html>
<html dir="ltr" lang="en-US">
<head>
<link href='http://hdonline.vn/template/frontend/css/reset.css' rel='stylesheet' type='text/css'>
<link href="http://hdonline.vn/template/frontend/css/style.css?v=0089" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://hdonline.vn/template/frontend/js/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="http://hdonline.vn/template/frontend/js/jquery.cluetip.min.js"></script>
<script type="text/javascript">
function buildTooltip(){
    $(".jt").cluetip(
        {
            cluetipClass:"jtip",
            attribute:"data-jtip",
            local:!0,
            arrows:!0,
            dropShadow:!0,
            hoverIntent:!0,
            sticky:!0,
            topOffset:10,
            mouseOutClose:"both",
            delayedClose:100,
            cluezIndex:499,
            width:280,
            arrowPixelAdded:185,
            closePosition:"title"
        }
    )}
$( document ).ready(function() {
  buildTooltip();
});
</script> 
</head>
<body>
<div class="tn-wrapper">
    <div class="tn-boxsty-dv">
        <div class="tn-list_carousel">
            <ul class="showMovie">
                <li>
                    <div class="tn-bxitem">
                    <a href="/phim-tay-du-ky-dai-thanh-tro-ve-9236.html" class="jt bxitem-link" data-jtip="#tophome-01">
                    <span class="bxitem-img">
                    <img src="http://hdonline.vn/i/resources/new//film/215x311/2015/08/23/tay-du-ky-dai-thanh-tro-ve.jpg" width="180" height="270" alt="Tây Du Ký: Đại Thánh Trở Về">
                    </span>
                    <span class="bxitem-txt"> Tây Du Ký: Đại Thánh Trở Về </span>
                    <span class="bxitem-over_play"></span>
                    </a>
                    <div id="tophome-01">
                    <p class="name-vi">Monkey King: Hero Is Back</p>
                    <p class="name-en">Tây Du Ký: Đại Thánh Trở Về</p>
                    <p>Đánh giá: 7.9 </p>
                    <p>Năm sản xuất: 2015 </p>
                    <div class="clearfix tip-info-bt">
                    <ul class="tip-info-bottom pull-right">
                    <li><span title="Phụ đề Việt" class="tagsInfo redTag">Vi</span></li>
                    <li><span title="Thuyết minh" class="tagsInfo redTag"><i class="fa fa-volume-up"></i></span></li>
                    <li><span title="Chất lượng HD 720p" class="tagsInfo greenTag"><strong>HD</strong></span></li>
                    </ul>
                    </div>
                    <div class="tn-contentdecs mb10">
                    Tây Du Ký: Đại Thánh trở về được dàn dựng dựa theo cuốn tiểu thuyết Tây Du Ký của nhà văn Ngô Thừa Ân, song có nhiều chi tiết mới. Mặc dù trong phim còn có “sạn”, bị một số nhà phê bình chỉ...
                    </div>
                    <div class="clearfix">
                    <a href="javascript:void(0)" onclick="viewYT('aqovlTzY2_U')" class="btn tn-btn-view pull-left">Trailer</a>
                    <a href="javascript:void(0)" onclick="setLater(9236, '.later-for-9236')" class="btn tn-btn-view2 btn-like-add pull-right later-for-9236">Xem sau</a>
                    <a href="javascript:void(0)" onclick="setLike(9236, '.like-for-9236')" class="btn tn-btn-view2 pull-right mr05 btn-like-add like-for-9236">Yêu thích</a>
                    </div> </div>
                    </div>
                </li>
                <li>
                    <div class="tn-bxitem">
                    <a href="/phim-fear-the-walking-dead-9680.html" class="jt bxitem-link" data-jtip="#tophome-02">
                    <span class="bxitem-episodes"> <span>Tập<br><font size='5'>01</font></span></span>
                    <span class="bxitem-img">
                    <img src="http://hdonline.vn/i/resources/new//film/215x311/2015/08/24/fear-the-walking-dead.jpg" width="180" height="270" alt="Fear the Walking Dead">
                    </span>
                    <span class="bxitem-txt"> Fear the Walking Dead </span>
                    <span class="bxitem-over_play"></span>
                    </a>
                    <div id="tophome-02">
                    <p class="name-vi">Fear the Walking Dead</p>
                    <p class="name-en">Fear the Walking Dead</p>
                    <p>Số Tập: 1/6 </p>
                    <p>Năm sản xuất: 2015 </p>
                    <div class="clearfix tip-info-bt">
                    <ul class="tip-info-bottom pull-right">
                    <li><span title="Phụ đề Việt" class="tagsInfo redTag">Vi</span></li>
                    <li><span title="Chất lượng HD 720p" class="tagsInfo greenTag"><strong>HD</strong></span></li>
                    </ul>
                    </div>
                    <div class="tn-contentdecs mb10">
                    Fear the Walking Dead 2015 là bộ phim lấy cùng thế giới với The Walking Dead nhưng sẽ là vào khoảng thời gian đầu khi đại dịch bùng phát và bối cảnh là thành phố Los Angeles của Mỹ. Fear sẽ KHÔNG tiết lộ...
                    </div>
                    <div class="clearfix">
                    <a href="javascript:void(0)" onclick="viewYT('yzXglr5bc3w')" class="btn tn-btn-view pull-left">Trailer</a>
                    <a href="javascript:void(0)" onclick="setLater(9680, '.later-for-9680')" class="btn tn-btn-view2 btn-like-add pull-right later-for-9680">Xem sau</a>
                    <a href="javascript:void(0)" onclick="setLike(9680, '.like-for-9680')" class="btn tn-btn-view2 pull-right mr05 btn-like-add like-for-9680">Yêu thích</a>
                    </div> </div>
                    </div>
                </li>
                <li>
                    <div class="tn-bxitem">
                    <a href="/phim-one-piece-episode-of-sabo-3-kyoudai-no-kizuna-kiseki-no-saikai-to-uketsugareru-ishi-9670.html" class="jt bxitem-link" data-jtip="#tophome-06">
                    <span class="bxitem-img">
                    <img src="http://hdonline.vn/i/resources/new//film/215x311/2015/08/24/one-piece-episode-of-sabo-3-kyoudai-no-kizuna-kiseki-no-saikai-to-uketsugareru-ishi.jpg" width="180" height="270" alt="One Piece: Episode of Sabo - 3 Kyoudai no Kizuna Kiseki no Saikai to Uketsugareru Ishi">
                    </span>
                    <span class="bxitem-txt"> One Piece: Episode of Sabo - 3 Kyoudai no Kizuna Kiseki no Saikai to Uketsugareru Ishi </span>
                    <span class="bxitem-over_play"></span>
                    </a>
                    <div id="tophome-06">
                    <p class="name-vi">One Piece: Episode of Sabo - 3 Kyoudai no Kizuna Kiseki no Saikai to Uketsugareru Ishi</p>
                    <p class="name-en">One Piece: Episode of Sabo - 3 Kyoudai no Kizuna Kiseki no Saikai to Uketsugareru Ishi</p>
                    <p>Năm sản xuất: 2015 </p>
                    <div class="clearfix tip-info-bt">
                    <ul class="tip-info-bottom pull-right">
                    <li><span title="Phụ đề Việt" class="tagsInfo redTag">Vi</span></li>
                    <li><span title="Chất lượng HD 720p" class="tagsInfo greenTag"><strong>HD</strong></span></li>
                    </ul>
                    </div>
                    <div class="tn-contentdecs mb10">
                    One Piece: Episode of Sabo - 3 Kyoudai no Kizuna Kiseki no Saikai to Uketsugareru Ishi 2015 (One Piece Special 9): Sau 2 năm luyện tập, Băng Mũ Rơm đã hẹn cùng nhau hội ngộ tại Quần Đảo Sabaody. Họ vượt qua Đảo Người...
                    </div>
                    <div class="clearfix">
                    <a href="javascript:void(0)" onclick="setLater(9670, '.later-for-9670')" class="btn tn-btn-view2 btn-like-add pull-right later-for-9670">Xem sau</a>
                    <a href="javascript:void(0)" onclick="setLike(9670, '.like-for-9670')" class="btn tn-btn-view2 pull-right mr05 btn-like-add like-for-9670">Yêu thích</a>
                    </div> </div>
                    </div>
                </li>                
            </ul>
        </div>
    </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

Mint Query

0 chủ đề

0 bài viết

Tác giả nổi bật