Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.
  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

Login và register lightbox show không như ý muốn

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi Trung thần thông, 18/7/12.

Tình trạng chủ đề:
Chủ đề đã bị khóa bình luận

Lượt xem: 2,898

  1. Trung thần thông Mới đăng kí

    HTML:
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title> login ligthbox Jquery </title>
    <style type="text/css">
    *{margin:0; padding:0;}
     
    /* thiết kế form login */
    .login,.password,.register
    {
    background-color:#85B561;
    heigth:auto;
    width:600px;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    padding-bottom:5px;
    display:none;
    margin:200px auto;
    overflow:hidden;
    }
     
    .login .login_title,.password .password_title,.register .register_title
    {
    color:white;
    font-size:16px;
    padding:20px 0 10px 20px;
    text-align:left;
    font-family:Verdana, Arial, Helvetica, sans-serif;
    }
     
    .login_content,.password_content,.register_content
    {
    background-color:white;
    margin-left:5px;
    margin-right:5px;
    height:auto;
    padding-top:15px;
    overflow:hidden;
    }
     
    .form_login
    {
    margin-top:10px;
    margin-bottom:10px;
    }
     
    .form_login_item
    {
    height:40px;
    color:#58595B;
    font-size:14px;
    width:600px;
    padding-top:5px;
    margin-bottom:10px;
    }
     
    .form_login_left
    {
    float:left;
    text-align:right;
    padding-right:10px;
    padding-top:12px;
    width:185px;
    }
     
    .other_color
    {
    color:red;
    }
     
    .form_login_right
    {
    float:left;
    text-align:left;
    width:400px;
    }
     
    .user
    {
    border:1px solid #666666;
    width:340px;
    height:30px;
    border-radius:5px;
    opacity:.7;
    margin-top:5px;
    box-shadow:1px,1px,1px,#CCCCCC;
    }
     
    .form_login_right input
    {
     
    border-radius:5px ;
    border:none; /* bỏ viền */
    color:black;
    font: 15px "Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    padding: 0px 10px;
    word-spacing: 0.1em;
    width:290px;
    margin:5px 0px;
    padding-left:10px;
    height:25px;
    margin-top:2px;
    }
     
    .clear
    {
    clear:both;
    line-height:0px;
    font-size:0px;
    }
     
    .lostpass span
    {
    float:left;
    text-align:left;
    font-size:11px;
    margin-top:15px;
    padding-right:5px;
    margin-left:194px;
    color:#58595B;
    line-height:15px;
    }
     
    .wrap
    {
    clear:both;
    }
     
    .button
    {
    background-image:url(Imager/submit.png);
    color:#FFFFFF;
    cursorointer;
    display:block;
    font-size:17px;
    height:40px;
    font-weight:normal;
    text-decoration:none;
    width:105px;
    border-radius:5px;
    }
     
     
     
    #bottom
    {
    font-family:Verdana, Arial, Helvetica, sans-serif;
    font-size:14px;
    height:10px;
    }
     
    .form_res_items
    {
    height:40px;
    color:#58595B;
    font-size:14px;
    width:650px;
    padding-top:5px;
    }
     
    .form_res_left
    {
    float:left;
    text-align:right;
    padding-right:10px;
    padding-top:7px;
    width:180px;
    }
     
    .form_res_right
    {
    float:left;
    text-align:left;
    width:300px;
    }
     
    .form_res_right input
    {
    border:1px solid #D5D5D5;
    border-radius:5px;
    box-shadow:1px 1px 5px rgba(0,0,0,.07) inset;
    color:black;
    font:12px/25px "Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
    height:28px;
    padding:0px 8px;
    word-spacing:0.1em;
    width:300px;
    }
     
     
     
    #lightbox
    {
    width:100%;
    height:100%;
    position:fixed;
    background:rgba(0, 0, 0, .5);
    position:fixed;
    float:left;
    top:0px;
    display:none;
    }
     
    .button_register
    {
    background:url(Imager/btn_register.png) no-repeat top center;
    width:128px;
    height:43px;
    border:0px;
    font-size:14px;
    font-weight:bold;
    color:black;
    }
     
    .lostpass_res
    {
    width:500px;
    padding-left:189px;float:left;
    height:auto;
    padding-bottom:8px;
    }
     
    /* thiết kế banner màu đen */
    .index_header
    {
    background-color:rgb(1,91,138);
    font-size:15px;
    font-family: Verdana, Geneva, sans-serif;
    height:68px;
    display:block;
    }
     
    .index_header a
    {
    color:white;
    padding:6px 0px 6px 17px;
    float:left;
    text-decoration:none;
    }
     
    .index_header a #dangnhap, #dangky
    {
    cursorointer;
    }
     
     
    </style>
    <script src="jquery-1.7.2.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function(){
    $('body').append('<div id="lightbox"></div>')
    $dangnhap = $('.index_header #dangnhap')
    $dangnhap.click(function(){
     
    $('#lightbox').fadeIn(200);
    $('.login').appendTo('#lightbox').show(200);
    });
    $dangky = $('.index_header #dangky')
    $dangky.click(function(){
     
    $('#lightbox').fadeIn(200);
    $('.register').appendTo('#lightbox').show(200);
    });
    /* xử lý nhảy sang form quên mật khẩu
    $('#Quen').click(function(){
     
    $('.login').fadeOut(200); // ẩn lại form login
    $('.password').appendTo('#lightbox').show();
    });
    // xử lý trở lại form đăng nhập
    $dn = $('#dangnhap');// không nhớ cách seletor rồi
    $dn.click(function(){
     
    $('.password').fadeOut(200); // ẩn lại form quên mật khẩu
    $('.login').appendTo('#lightbox').show();
    });*/
    $('.login').css('margin-top',($('#lightbox').height()-$('.login').height())/2)
    $('.login img').click(function(){
    $('#lightbox').hide();
    })
     
    $('#Quen').click(function(){ $('.login').fadeOut(100,function(){$('.password').appendTo('#lightbox').show(100);});});
    $('.password .password_content p a').click(function(){ $('.password').fadeOut(100,function(){$('.login').appendTo('#lightbox').show(100);});});
    $('.login .login_content .form_login .lostpass .button_register').click(function(){ $('.login').fadeOut(100,function(){$('.register').appendTo('#lightbox').show(100);});});
    });
    </script>
    </head>
     
    <body>
    <div class="index_header">
    <a id="dangky"> Đăng ký </a> <a id="dangnhap"> Đăng nhập </a>
    </div>
     
    <!-- thiết kế form login -->
    <div class="login">
    <p class="login_title"> Đăng nhập </p>
    <img src="Imager/close.png" style="float:right; margin-top:-43px;margin-right:5px;cursorointer" alt="hinh1"/>
    <div class="login_content">
    <div class="form_login">
    <div class="form_login_item">
    <div class="form_login_left">
    Email đăng nhập :
    <span class="other_color"> (*)</span>
    </div>
    <div class="form_login_right">
    <div class="user">
    <img src="Imager/icon_user.png" style="margin-top:3px;float:left;" />
    <input type="text" placeholder="Email đăng nhập"/>
    </div>
    </div>
     
    </div>
    <div class="form_login_item">
    <div class="form_login_left">
    Mật khẩu :
    <span class="other_color"> (*)</span>
    </div>
    <div class="form_login_right">
    <div class="user">
    <img src="Imager/icon_pass.png" style="margin-top:3px; float:left;" />
    <input type="password" placeholder="Mật khẩu"/>
    </div>
    </div>
     
    </div>
    <div class="lostpass">
    <span>
    <label> <input type="checkbox" /> Nhớ trạng thái đăng nhập | <a id="Quen" style="text-decoration:none;color:black;">Quên mật khẩu</a></label>
    </span>
    </div>
    <div class="lostpass">
    <span style="width:38px;">
    <input type="submit" class="button" value="Đăng nhập" style="float:left;vertical-align:middle; margin-bottom:10px;"/>
    <p style="margin-top:-40px;margin-right:-195px;margin-left:116px;float:left;">Hoặc</p>
    <input type="button" class="button_register" value="Đăng ký" style="float:right; margin-top:-50px;margin-right:-240px;cursorointer;"/>
    </span>
    </div>
    </div>
    </div>
    <div>
     
    <!-- Thiết kế from quên mật khẩu -->
    <div class="password">
    <p class="password_title"> Quên mật khẩu </p>
    <img src="Imager/close.png" style="float:right; margin-top:-43px;margin-right:5px;cursorointer" alt="hinh1"/>
    <div class="password_content">
    <p style="margin-left:16px;"> Hảy điền Email để phục hồi mật khẩu và nhận hướng dẫn thay đỗi mật khẩu </p>
    <input placeholder="Email đăng ký" style="float:left;margin-top:21px;margin-left:16px;margin-bottom:10px;width:420px;height:35px;font-size:14px;"/>
    <input type="submit" class="button" value="Gữi" style="float:left;vertical-align:middle; margin-bottom:10px;margin-top:19px;margin-right:1px;padding-right:5px;"/>
    <p style="float:left;margin-top:10px;margin-left:16px;margin-bottom:10px;width:420px;height:28px;font-size:12px;">
    Quay lại trang <a style="text-decoration:none;cursorointer;font-weight:bold;">đăng nhập</a> </p>
    </div>
    <div>
     
    <!-- Kết thúc thiết kế form quên mật khẩu -->
     
     
    <!-- Thiết kế form đăng ký -->
    <div class="register">
    <p class="register_title"> Đăng ký</p>
    <img src="Imager/close.png" style="float:right; margin-top:-43px;margin-right:5px;cursorointer" alt="hinh1"/>
    <div class="register_content">
    <div class="from_res">
    <div class="form_res_items">
    <div class="form_res_left">Email span class="other_color">(*)</span></div>
    <div class="form_res_right">
    <input type="text">
    </div>
    </div>
    <div class="form_res_items">
    <div class="form_res_left"> Mật khẩu span class="other_color">(*)</span></div>
    <div class="form_res_right">
    <input type="password">
    </div>
    </div>
    <div class="form_res_items">
    <div class="form_res_left">Nhập lại mật khẩu span class="other_color">(*)</span></div>
    <div class="form_res_right">
    <input type="password">
    </div>
    </div>
    <div class="form_res_items">
    <div class="form_res_left">Giới tính span class="other_color">(*)</span></div>
    <div class="form_res_right"></div>
    <p style="text-align:left;padding:15px 0 0 0;padding-top:8px;">
    <input type="radio"/> Nam <input type="radio"/> Nữ
    </p>
    </div>
    <div class="lostpass_res" style="margin-top:6px;">
    <span>
    <label>
    <input type="checkbox" /> Tôi đồng ý với sàn giao dịch
    </label>
    </span>
    </div>
    <div class="lostpass_res" style="margin-top:6px;">
    <span type="line-right:40px;margin-left:134px;font-size:12px;margin-top:10px;">
    <input type="submit" class="button" value="Đăng ký" style="float:left; margin-bottom:10px;"/>
    </span>
    </div>
    </div>
    </div>
    </div>
    <!-- kết thúc thiết kế form đăng ký-->
    </body>
    </html>
    
    Các bạn dán vào code chạy thử sẽ thấy lúc đầu nó show đúng khi mình click khi đăng nhập hoặc đăng ký. Nhưng làm lại thì bị lỗi nó show không đúng form mình mình muốn hiển thị

    ...
  2. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Chưa hiểu lắm ý của bạn, bạn có thể nói rõ hơn ko? Và lần sau nên bỏ đoạn code này trong thẻ code nhé :)
  3. Trung thần thông

    Trung thần thông Mới đăng kí

    tương tự như hiệu ứng login và resigter của cungmua.com.vn ấy. Khi clikc vào đăng ký thì hiện form đăng ký , còn clikc vào đăng nhập thì chỉ hiện form đăng nhập. Như đoạn code jquery trên thì ban đầu đúng nhưng sau đó lại show lộn sộn
  4. pingpoong

    pingpoong Thành viên cấp 2

    Bạn nén file rồi gửi lên để mình xem.
    Chứ mỗi cái code HTML thế này thì sao chạy web được.
    Không có file hình lẫn jquery thì chịu thôi
  5. Trung thần thông

    Trung thần thông Mới đăng kí

  6. Trung thần thông

    Trung thần thông Mới đăng kí

    bạn nào nói giúp đâu sao không thấy giải đáp
  7. banbaonylong

    banbaonylong Ko phải assmin

    bạn lụm cái source code này ở đâu?
  8. Trung thần thông

    Trung thần thông Mới đăng kí

    Lụm ở đâu tự viết đấy chứ. Form login và register thì lấy source ở trang muachung.com.vn còn code jquery tự viết tham khảo mấy cái source. Mà không rõ sao mình seletor đúng mà nó gọi sự kiện không đúng.
  9. banbaonylong

    banbaonylong Ko phải assmin

    jquery-1.7.2.min.js mà bạn tự viết à =))

    2 cái form ban đầu ko đúng "kích thước" với cái thuật toán trong cái script nên nó hiển thị ko chính xác
  10. Trung thần thông

    Trung thần thông Mới đăng kí

    thì file jquery thì lấy trên trang chủ jquery chứ, tưởng hỏi nguyên bài. Thế cách sửa ra sao.
  11. banbaonylong

    banbaonylong Ko phải assmin

    bợn lồng css, script vào thẳng 1 file html nhìn rất oải, tối qua mình ngồi tách lớp thôi đã chán ko mún sửa

    mình RIP lại cái form gốc : http://www.mediafire.com/?nga4ytqx2yv4t8z
  12. pingpoong

    pingpoong Thành viên cấp 2

    Bạn tham khảo cái này xem. Sửa rồi đấy.
    Mà cái pop-up này đâu cần nhiều code như vậy đâu banbaonylong :-/
  13. banbaonylong

    banbaonylong Ko phải assmin

    RIP xong lười xóa cái thừa wá :(
Tình trạng chủ đề:
Chủ đề đã bị khóa bình luận

Ủng hộ diễn đàn