Hướng dẫn dialog php - hộp thoại php

Quên mật khẩu?

[/html]

Mã html trên hoàn toàn dễ hiểu, nên mình sẽ không tập trung nhiều.

CSS

/*phần tử phủ toàn màn hình,không được hiển thị*/

#over {

    display: none;

    background: #000;

    position: fixed;

    left: 0;

    top: 0;

    width: 100%;

    height: 100%;

    opacity: 0.8;

    z-index: 999;

}

a, a:visited, a:active{

    text-decoration:none;

}

.login

{

    background-color:#85B561;

    height:auto;

    width:450px;

    font-family:Verdana, Arial, Helvetica, sans-serif;

    font-size:14px;

    padding-bottom:5px;

    display:none;

    overflow:hidden;

    position:absolute;

    z-index:99999;

    top:10%;

    left:50%;

    margin-left:-300px;

}
.login .login_title

{

    color:white;

    font-size:16px;

    padding:8px 0 5px 8px;

    text-align:left;

}
.login-content label {

    display: block;

    padding-bottom: 7px;

}

.login-content span {

display: block;

}

.login-content

{

padding-left:35px;

background-color:white;

margin-left:5px;

margin-right:5px;

height:auto;

padding-top:15px;

overflow:hidden;

}
.img-close {

float: right;

margin-top:-43px;

margin-right:5px

}

.button{

display: inline-block;

min-width: 46px;

text-align: center;

color: #444;

font-size: 14px;

font-weight: 700;

height: 36px;

padding: 0px 8px;

line-height: 36px;

border-radius: 4px;

transition: all 0.218s ease 0s;

border: 1px solid #DCDCDC;

background-color: #F5F5F5;

background-image: -moz-linear-gradient(center top , #F5F5F5, #F1F1F1);

cursor: pointer;

}

.button:hover{

border: 1px solid #DCDCDC;

text-decoration: none;

-moz-box-shadow: 0 1px 1px rgba(0,0,0,0.1);

-webkit-box-shadow: 0 1px 1px rgba(0,0,0,0.1);

box-shadow: 0 2px 2px rgba(0,0,0,0.1);

}

.login 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;

}

.submit-button{

display: inline-block;

padding: auto;

margin: 15px 75px;

width: 150px;

}

Xem đoạn css trên, bạn cần chú ý tới 2 thành phần quan trọng:

Phần tử “#over”: là lớp phủ toàn màn hình, bạn ẩn nó bằng cách đặt display: none và để z-index: 999 để nó hiện  nổi bật hơn các phần tử nền. Ngoài ra position: fixed để cố định vị trí cho nó đồng thời đặt opacity: 0,8 để làm mờ trang.: là lớp phủ toàn màn hình, bạn ẩn nó bằng cách đặt display: none và để z-index: 999 để nó hiện  nổi bật hơn các phần tử nền. Ngoài ra position: fixed để cố định vị trí cho nó đồng thời đặt opacity: 0,8 để làm mờ trang.

Thứ 2 là form đăng nhập: lớp “.login” bạn đặt z-index: 99999, lớn hơn phần tử “#mask”, vì nó sẽ nổi bật nhất trên trang web.: lớp “.login” bạn đặt z-index: 99999, lớn hơn phần tử “#mask”, vì nó sẽ nổi bật nhất trên trang web.

Các thuộc tính còn lại, bạn có thể tùy chỉnh theo ý mình sao cho đẹp nhất.

Jquery

Phần quan trong nhất là jquery. Bạn nhớ là load thư viện jquery vào trước nhé

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Ở đây mình dùng thư viện jquery phiên bản 1.10.2

$(document).ready(function() {

    $(‘a.login-window’).click(function() {

        //lấy giá trị thuộc tính href – chính là phần tử "#login-box"

        var loginBox = $(this).attr(‘href’);
        //cho hiện hộp đăng nhập trong 300ms

        $(loginBox).fadeIn(300);
        // thêm phần tử id="over" vào sau body

        $(‘body’).append(‘<div id="over">’);

        $(‘#over’).fadeIn(300);
        return false;

 });
 // khi click đóng hộp thoại

 $(document).on(‘click’, "a.close, #over", function() {

       $(‘#over, .login’).fadeOut(300 , function() {

           $(‘#over’).remove();

       });

      return false;

 });

});

Mã jquery sẽ xử lý 2 sự kiện chính:

Khi click vào nút đăng nhập:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Câu lệnh

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Hàm

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Câu lệnh

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Sự kiện thứ 2: khi ta click vào nút đóng cửa sổ hoặc click vào lớp phủ nền “#over” thì cửa sổ đăng nhập sẽ đóng lại.: khi ta click vào nút đóng cửa sổ hoặc click vào lớp phủ nền “#over” thì cửa sổ đăng nhập sẽ đóng lại.

Hãy chú ý câu lệnh

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Các bạn sẽ thắc mắc tại sao không dùng

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

$(document).ready(function() {

    $(‘a.login-window’).click(function() {

        //lấy giá trị thuộc tính href – chính là phần tử "#login-box"

        var loginBox = $(this).attr(‘href’);
        //cho hiện hộp đăng nhập trong 300ms

        $(loginBox).fadeIn(300);
        // thêm phần tử id="over" vào sau body

        $(‘body’).append(‘<div id="over">’);

        $(‘#over’).fadeIn(300);
        return false;

 });
 // khi click đóng hộp thoại

 $(document).on(‘click’, "a.close, #over", function() {

       $(‘#over, .login’).fadeOut(300 , function() {

           $(‘#over’).remove();

       });

      return false;

 });

});

$(document).ready(function() {

    $(‘a.login-window’).click(function() {

        //lấy giá trị thuộc tính href – chính là phần tử "#login-box"

        var loginBox = $(this).attr(‘href’);
        //cho hiện hộp đăng nhập trong 300ms

        $(loginBox).fadeIn(300);
        // thêm phần tử id="over" vào sau body

        $(‘body’).append(‘<div id="over">’);

        $(‘#over’).fadeIn(300);
        return false;

 });
 // khi click đóng hộp thoại

 $(document).on(‘click’, "a.close, #over", function() {

       $(‘#over, .login’).fadeOut(300 , function() {

           $(‘#over’).remove();

       });

      return false;

 });

});

Nhiều bạn có thể sử dụng hàm

$(document).ready(function() {

    $(‘a.login-window’).click(function() {

        //lấy giá trị thuộc tính href – chính là phần tử "#login-box"

        var loginBox = $(this).attr(‘href’);
        //cho hiện hộp đăng nhập trong 300ms

        $(loginBox).fadeIn(300);

 // thêm phần tử id="over" vào sau body

$(‘body’).append(‘<div id="over">’);

$(‘#over’).fadeIn(300);
 return false;

});
 // khi click đóng hộp thoại

$(document).on(‘click’, "a.close, #over", function() {

$(‘#over, .login’).fadeOut(300 , function() {

$(‘#over’).remove();

});

return false;

});

});

$(document).ready(function() {

    $(‘a.login-window’).click(function() {

        //lấy giá trị thuộc tính href – chính là phần tử "#login-box"

        var loginBox = $(this).attr(‘href’);
        //cho hiện hộp đăng nhập trong 300ms

        $(loginBox).fadeIn(300);
        // thêm phần tử id="over" vào sau body

        $(‘body’).append(‘<div id="over">’);

        $(‘#over’).fadeIn(300);
        return false;

 });
 // khi click đóng hộp thoại

 $(document).on(‘click’, "a.close, #over", function() {

       $(‘#over, .login’).fadeOut(300 , function() {

           $(‘#over’).remove();

       });

      return false;

 });

});

$(document).ready(function() {

    $(‘a.login-window’).click(function() {

        //lấy giá trị thuộc tính href – chính là phần tử "#login-box"

        var loginBox = $(this).attr(‘href’);
        //cho hiện hộp đăng nhập trong 300ms

        $(loginBox).fadeIn(300);
        // thêm phần tử id="over" vào sau body

        $(‘body’).append(‘<div id="over">’);

        $(‘#over’).fadeIn(300);
        return false;

 });
 // khi click đóng hộp thoại

 $(document).on(‘click’, "a.close, #over", function() {

       $(‘#over, .login’).fadeOut(300 , function() {

           $(‘#over’).remove();

       });

      return false;

 });

});

Hàm

$(document).ready(function() {

    $(‘a.login-window’).click(function() {

        //lấy giá trị thuộc tính href – chính là phần tử "#login-box"

        var loginBox = $(this).attr(‘href’);
        //cho hiện hộp đăng nhập trong 300ms

        $(loginBox).fadeIn(300);
        // thêm phần tử id="over" vào sau body

        $(‘body’).append(‘<div id="over">’);

        $(‘#over’).fadeIn(300);
        return false;

 });

 // khi click đóng hộp thoại

$(document).on(‘click’, "a.close, #over", function() {

$(‘#over, .login’).fadeOut(300 , function() {

$(‘#over’).remove();

});

return false;

});

});

$(document).ready(function() {

    $(‘a.login-window’).click(function() {

        //lấy giá trị thuộc tính href – chính là phần tử "#login-box"

        var loginBox = $(this).attr(‘href’);
        //cho hiện hộp đăng nhập trong 300ms

        $(loginBox).fadeIn(300);
        // thêm phần tử id="over" vào sau body

        $(‘body’).append(‘<div id="over">’);

        $(‘#over’).fadeIn(300);
        return false;

 });
 // khi click đóng hộp thoại

 $(document).on(‘click’, "a.close, #over", function() {

       $(‘#over, .login’).fadeOut(300 , function() {

           $(‘#over’).remove();

       });

      return false;

 });

});

$(document).ready(function() {

    $(‘a.login-window’).click(function() {

        //lấy giá trị thuộc tính href – chính là phần tử "#login-box"

        var loginBox = $(this).attr(‘href’);
        //cho hiện hộp đăng nhập trong 300ms

        $(loginBox).fadeIn(300);
        // thêm phần tử id="over" vào sau body

        $(‘body’).append(‘<div id="over">’);

        $(‘#over’).fadeIn(300);
        return false;

 });
 // khi click đóng hộp thoại

 $(document).on(‘click’, "a.close, #over", function() {

       $(‘#over, .login’).fadeOut(300 , function() {

           $(‘#over’).remove();

       });

      return false;

 });

});

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>

Như vậy là chúng ta đã tạo được một box dialog đơn giản để điền thông tin đăng nhập. Bạn hãy thực hành và tạo những hiệu ứng và style đẹp hơn mà mình thích.

Lời kết

Mình nghĩ rằng không khó để tìm ra những plugin tạo lightbox hay dialog trên mạng. Rất nhiều, tuy nhiên nếu các bạn tự tay xây dựng cho mình một sản phẩm riêng thì vẫn thích thú hơn đúng không? Nhất là những bạn đang bắt đầu với jquery. Hy vọng bài viết sẽ có ích với các bạn. Hãy comment bên dưới nếu bạn cần trao đổi nhé!

Hiện tại blog tạm đóng bình luận vì mình cần tập trung thời gian vào cập nhật bài viết. Bình luận sẽ mở ra cho đến khi mình sẵn sàng.