我正在使用colorbox.js来创建一个模态窗口: 我只需要在页面上加载时将名称’colorbox-form’添加到id为#colorbox的元素中. 这是触发器的javascript. $(document).ready(function(){ $(".modal").colorbox({wid
我只需要在页面上加载时将名称’colorbox-form’添加到id为#colorbox的元素中.
这是触发器的javascript.
$(document).ready(function(){ $(".modal").colorbox({width:"50%", inline:true, href:"#inline_contact" }); });
colorbox.js可以在这里找到:
http://colorpowered.com/colorbox/#click
这是加载时彩盒的html:
<div style="padding-bottom: 122px; padding-right: 122px; opacity: 1; cursor: auto; position: absolute; display: block; width: 669px; height: 435px; top: 700px; left: 436px; " id="colorbox" class=""> <div id="cboxWrapper" style="width: 791px; height: 557px; "> <div style="" id="mf0"> <div id="cboxTopLeft" style="float: left; "> </div> <div id="cboxTopCenter" style="float: left; width: 669px; "> </div> <div id="cboxTopRight" style="float: left; "> </div> </div> <div style="clear: left; " id="mf1"> <div id="cboxMiddleLeft" style="float: left; height: 435px; "> </div> <div id="cboxContent" style="float: left; width: 669px; height: 435px; "> <div id="cboxLoadedContent" style="width: 669px; overflow-x: auto; overflow-y: auto; height: 407px; "> <p>content</p></div> <div id="cboxLoadingOverlay" style="height: 435px; display: none; " class=""></div> <div id="cboxLoadingGraphic" style="height: 435px; display: none; " class=""></div> <div id="cboxTitle" style="display: block; " class=""></div> <div id="cboxCurrent" style="display: none; " class=""></div> <div id="cboxNext" style="display: none; " class=""></div> <div id="cboxPrevious" style="display: none; " class=""></div> <div id="cboxSlideshow" style="display: none; " class=""></div> <div id="cboxClose" style="" class="">close</div></div> <div id="cboxMiddleRight" style="float: left; height: 435px; "></div></div> <div style="clear: left; " id="mf2"><div id="cboxBottomLeft" style="float: left; "></div> <div id="cboxBottomCenter" style="float: left; width: 669px; "></div> <div id="cboxBottomRight" style="float: left; "></div> </div> </div> <div style="position: absolute; width: 9999px; visibility: hidden; display: none; " id="mf3"> </div> </div>这应该做的伎俩:)
$(document).ready(function() { $("#colorbox").addClass("colorbox-form"); });