Caobox là một dạng như lightbox, dùng Javascript để tạo một dialogs, box content … được CKT phát triển đầu tiên, và mình tiếp tục phát triển thêm. Mục đích ban đầu là để thay thế cho các script cùng loại nhưng nặng và khó điều khiển (ví dụ như modalbox ) .

Caobox sử dụng Javascript dựa trên jQuery Framework, valid XHTML/CSS. Cánh sử dụng đơn giản bằng cách hiển thị vùng content có sẵn trên file html (div), chưa phát triển chức năng load content bằng Ajax, mình vẫn đang hoàn thiện thêm.

Features:

• Gọn nhẹ, file size khoảng 4KB (minified)
• Có thể chọn option dễ dàng để thay đổi overlay background color, vị trí box sẽ hiện ra, chức năng khoá click để đóng popup …
• Dùng hiển thị được dynamic content, flash content, image …
• Xử lý chức năng bấm Tab trên bàn phím dùng cho box có form input
• Effect fade đơn giản gọn nhẹ & load tốt

Demo:

Xem demo của Caobox v1.0.4 tại đây

Download:

Installation:

+ Include Javascript:

<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="caobox.min.js"></script>

+ CSS:

Không sử dụng css nào thêm, bạn có thể tự định nghĩa css riêng cho từng box với ID box cần hiển thị

+ Usage:
onclick="caobox.show('boxID', 'overlayColor', 'overlayOpacity', 'overlayDisable', 'leftPosition', 'topPosition')"onclick="caobox.show('testID', '000', '50', 'false', '10', '10')"

+ Option:

- divID : [char] Div’s id
- overlayColor : [hex number] Used to define the overlay background color.  ‘000‘ (black) is default
- overlayOpacity : [int 0~100] Used to define the overlay opacity. ’50‘ is default.
- overlayDisable : ['false'] Used to disable click on overlay to close popup. null is default
- leftPosition :[int] The padding CSS information used in the left position of image box. null mean center is default. [int]<0 is padding-right position
- topPosition :[int] The padding CSS information used in the top position of image box. null mean middle is default. [int]<0 is padding-bottom position

Với các div cần show cần thêm class “caobox-popup”

<div id="box1" class="caobox-popup">TEST BOX </div>

Hoặc bạn chỉ cần display:none div đó mà không cần thêm class trên

License:

- Sử dụng miễn phí
- Nếu bạn có ý định sửa hay phát triển caobox, hãy liên lạc và cho mình biết
- Phần comment về author cần được giữ nguyên.