Tôi muốn hiển thị nội dung của div ẩn trong hộp đèn khi trang tải.Cách sử dụng hộp màu plugin hộp đèn?
Tôi làm cách nào để thực hiện việc này với color box?
Điều tôi không hiểu:
Tôi có cần sử dụng tệp CSS của mình không? Cái nào, ở đâu?
Làm cách nào để làm cho hộp đèn sáng lên khi trang tải?
tôi đã cố gắng này, nhưng không may mắn:
$(document).ready(function(){
$("#div_id_i_want_to_show").colorbox({width:"50%", inline:true});
});
Câu trả lời của jyoseph đã đi đúng hướng. Tôi cũng đã phải làm cho div có thể nhìn thấy trước khi nó sẽ hiển thị (nếu không nó chỉ hiển thị một màn hình màu đen). và sau đó tôi phải ẩn div sau khi người dùng đóng hộp đèn.
Lưu ý: Tôi cũng phải chỉnh sửa tệp css để trỏ đến thư mục nơi tôi đặt hình ảnh của mình.
Đây là mã cuối cùng của tôi:
$(document).ready(function(){
$('#div_id_i_want_to_show').show();
$.colorbox({'href':'#div_id_i_want_to_show', 'inline':true, 'width':'600px', 'height':'600px'});
$(document).bind('cbox_closed', function(){
$('#div_id_i_want_to_show').hide();
});
});
Bạn cần phải sử dụng các tập tin hộp thuốc vẽ css từ bất cứ chủ đề nào bạn muốn. Có 5 trong phần tải xuống. Xem các thư mục Example1, Example2, Example3, Example4, Example5. Mỗi người sẽ có một tệp css và một thư mục có hình ảnh. Bạn cũng có thể tạo chủ đề tùy chỉnh của riêng mình, nếu bạn muốn.
Để mở hộp thuốc vẽ trên tải trang bạn cần phải sử dụng phương pháp công cộng: $ .colorbox()
dụ làm việc: http://jsbin.com/uficu
Trong ví dụ mà tôi có html: <div id="content">Hello from JSBin</div>
Và phương thức công khai: $ .colorbox ({href: '# content', mở: true, inline: true})
Kiểm tra tài liệu: http://colorpowered.com/colorbox/
Hãy thử tùy chọn mở Olli.
$(".el").colorbox({open:true})
Đây là một mẹo. Không cần phải thêm javascript (hoặc móc sự kiện đóng hộp màu) cho điều này.
jquery.colorbox chuyển nội dung nội tuyến của bạn thành một cấu trúc nó tạo ra html> thân gốc, trước khi hiển thị nó và di chuyển nó trở lại khi đóng. Đó là một IMO hành vi kỳ lạ, nhưng tận dụng lợi thế và áp dụng 'quy tắc ẩn' của bạn cho phù hợp.
<style>
#div_id_i_want_to_show { display: block; ...your other style rules... }
#divParent #div_id_i_want_to_show { display: none; }
<style>
<div id='parent'><div id='div_id_i_want_to_show'>...
Cách khác, đảo ngược quy tắc và đặt 'quy tắc tiết lộ' tùy thuộc vào yếu tố được xác định hộp màu.
<style>
#div_id_i_want_to_show { display: none; ...your other style rules... }
.colorbox #div_id_i_want_to_show { display: block; }
<style>
<div id='div_id_i_want_to_show'>...
Ồ, ngoài ra, một tùy chọn khác là giữ #div_id_i_want_to_show bên trong một trình bao bọc .hiddenDiv.
<style>
#div_id_i_want_to_show { ...your style rules... }
.hiddenDiv { display: none; }
<style>
<div class='.hiddenDiv'><div id='div_id_i_want_to_show'>...
On nhấn một số nút emailPopup
<div class="emailUse">
<a class="emailPopup" href="#emailPopup_content">Mail Me</a>
</div>
Bạn muốn mở một số cửa sổ bật lên có id là emailPopup_content sử dụng hộp thuốc vẽ
<div style='display: none'>
<div id='emailPopup_content'>
Hi user,
Thank you!
</div>
</div>
Tất cả bạn cần làm là viết jQuery như:
$(document).ready(function() {
$('.emailPopup').colorbox({inline:true, width:"380px",height:"410px"});
});
Giải thích: jQuery ẩn div emailPopup_content được hiển thị trong cửa sổ bật lên như tham chiếu theo href
KHÔNG quên bao gồm:
<head>
<link rel="stylesheet" href="colorbox.css">
<script src="jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
</head>
http://www.jacklmoore.com/colorbox/jquery.colorbox.js http://www.jacklmoore.com/colorbox/example4/colorbox.css
Bạn có thể bỏ qua những cánh hiển thị và ẩn bằng cách đặt div những gì bạn muốn hiển thị "#div_id_i_want_to_show" bên trong một div ẩn. – mcassano