Plugin cho phép bạn tùy chỉnh độ trong suốt của overlay, khoảng cách tới mép trên trình duyệt. Chiều rộng và chiều cao của modal box được tính toán tự động. Tất nhiên là bạn cũng có thể khai báo nhiều modal box trên một trang.

Cách sử dụng

Trước hết bạn cần thêm jQuery và leanModal vào website:

<script type="text/javascript" src="path_to/jquery.min.js"></script>
<script type="text/javascript" src="path_to/jquery.leanModal.min.js"></script>

Vì plugin không đi kèm ảnh và CSS, bạn phải thêm CSS, và bạn cần phải ẩn phần tử đi bằng 'display: none;' (leanModal sẽ làm cho modal box hiện lên khi có sự kiện nào đó).

#lean_overlay {
    position: fixed;
    z-index:100;
    top: 0px;
    left: 0px;
    height:100%;
    width:100%;
    background: #000;
    display: none;
}

Gọi leanModal lên làm việc:

$(function() {
    $("#trigger_id").leanModal();		
});

Trong đó trigger_id chính là phần tử bạn click vào để hiển thị modal box (thường là thẻ a). Nếu bạn muốn hiển thị nhiều hơn 1 modal box trong một trang, chỉ cần thêm thuộc tính 'rel' như sau:

$(function() {
    $("a[rel*=leanModal]").leanModal();		
});

Tùy biến

Như đã nói ở trên, bạn có thể tùy biến vị trí và overlay như sau:

$(function() {
    $("#trigger_id").leanModal({ top : 200, overlay : 0.4 });		
});