[jQuery] Hướng dẫn tạo hiệu ứng Dialog Box đơn giản [NEW]

Hộp thoại, Hộp đèn đẹp Cửa sổ bật lên là những thuật ngữ quen thuộc trong Jquery. Nó giúp mở một cửa sổ nhỏ, nổi bật ở giữa trang web để hiển thị các hướng dẫn, giới thiệu hoặc tạo biểu mẫu để lấy thông tin từ người dùng. Các ô như vậy tương tác ngay trên trang hiện tại mà không cần mở trang mới, điều này tạo sự thân thiện và thích thú cho người xem.

Trong bài viết này, chúng tôi sẽ tạo một hộp đăng nhập đơn giản, sử dụng HTML, CSS và jQuery.

[jQuery] Hướng dẫn tạo hiệu ứng Dialog Box đơn giản [NEW]

Mã nguồn demo

HTML

Mã HTML bao gồm 2 thành phần cơ bản:

Tạo một nút để khi nhấp vào, biểu mẫu đăng nhập được hiển thị:

[html][/html]

Sau đó là lớp “.login”, là hình thức đăng nhập như sau:

[html]

[/html]

Đoạn 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 css trên, bạn cần chú ý 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 cài đặt display: none và để z-index: 999 để nó nổi bật trên các yếu tố nền. ngoài ra position: fixed để cố định vị trí cho nó và đặt opacity: 0,8 để làm mờ trang.

Thứ hai là hình thức đăng nhập: Lớp “.login” bạn đặt z-index: 99999lớ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 ý thích của mình.

Jquery

Phần quan trọng nhất là jquery. Nhớ tải thư viện jquery trước


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

Ở đây mình sử 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 bạn nhấp vào nút đăng nhập: $('a.login-window').click(function():

Lệnh var loginBox = $(this).attr('href') sẽ lấy thuộc tính href – là “#login-box” . Bạn xem lại đoạn mã html mà chúng tôi đã có:

<a href="https://thachpham.com/web-development/javascript/#login-box" class="login-window button">Đăng nhập</a>

Hàm fadeIn(300) sẽ dần dần hiển thị hộp đăng nhập trong 300ms. Bạn có thể thay đổi thời gian này và nhớ rằng nó được tính bằng mili giây. Hoặc bạn cũng có thể sử dụng fadeIn(“slow”), fadeIn(“fast”) làm cho lớp xuất hiện chậm hoặc nhanh.

Lệnh $('body').append('<div id="over"></div>') sẽ thêm vào cuối thẻ id nội dung “#over” mà chúng tôi đã tạo kiểu cho nó trong phần CSS. Sau đó, chỉ cần hiển thị nó.

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

Chú ý đến lệnh $(document).on('click', "a.close, #over", function(){….})

Bạn sẽ thắc mắc tại sao không sử dụng $(“a.close, #over”).on(). Bởi vì, phần tử “#over” được thêm vào sau khi tài liệu (bao gồm cả đoạn mã jquery ở trên) được tải nên nếu sử dụng như vậy hộp thoại sẽ không bị ảnh hưởng khi chúng ta nhấp vào nền. Vì vậy, hãy sử dụng $(document).on() là hợp lý. Cái này bạn tự test để kiểm tra và xem thêm về chức năng on() tại http://api.jquery.com/on/.

Nhiều bạn có thể sử dụng hàm live() thay vì chức năng on(). Tuy nhiên, từ phiên bản jquery 1.9, hàm live() không được hỗ trợ nữa và nó sẽ không hoạt động.

Hàm fadeOut() là công việc ngược lại của chức năng fadeIn()làm mờ hộp đăng nhập và chức năng remove() sẽ loại bỏ phần tử “#over” từ tài liệu.

Như vậy là chúng ta đã tạo xong một hộp thoại đơn giản để điền thông tin đăng nhập. Thực hành và tạo ra nhiều hiệu ứng đẹp và phong cách mà bạn thích.

Phần kết

Tôi nghĩ rằng không khó để tìm thấy các plugin để tạo hộp đèn hoặc hộp thoại trực tuyến. Rất nhiều nhưng nếu bạn tự tay xây dựng sản phẩm thì vẫn thú vị hơn đúng không? Đặc biệt là những bạn đang bắt đầu với jquery. Hi vọng bài viết sẽ hữu ích với bạn. Hãy comment bên dưới nếu bạn cần trao đổi nhé!

Đánh giá nội dung này