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.
good good… thanks su phu nhe…. he he
Xin hỏi anh Hiển là nếu muốn làm cái scollbar trong trường hợp nội dung dài quá mà mình chỉ có một khoảng không gian nhỏ để hiển thị cái box đó ? Cám ơn anh nhiều ^^
Bai viet hay
Chay trong jQuery [jquery-1.3.2.min.js] loi roi ban oi.
Mình test trên 1.3.2 kg thấy lỗi gì, và trên cả bản mới nhất 1.4.1. Không rõ lỗi bạn gặp ntn?