javascript - jQuery lightbox(featherlight) 如何运行 beforeOpen 和 afterOpen 事件

Question

我正在使用这个 jQuery 灯箱，它是 featherlight并且不明白如何触发波纹管事件，因为我不擅长所以我希望有人提供帮助:

打开前:

beforeOpen: function(event){

}

打开后:

afterOpen: function(event){

}

我的代码工作:

<button id="openbox" href="#fl1">Load Lightbox on click event</button>

<div class="lightbox" id="fl1">
    <h2>Delete Item</h2>
    <div class="row">
        <div class="twelve columns">
            <strong>Are you Sure?</strong>
            <br>blubblub?
        </div>
    </div>
    <div class="right"> <a href="#" class="btn btn_gray no text_none" id="close_button">Close</a>
    <a href="#" class="btn btn_red text_none">Yes</a>
    </div>
</div>


$('#openbox').click(function() {
    $.featherlight('#fl1');
});

我的 fiddle :http://jsfiddle.net/g68bZ/29/

谢谢。

Answer 1

我已经下载了源代码并按照文档进行操作，并且这两个事件都可以在您的示例中正常运行。

HTML 部分:

<button id="openbox" href="#fl1">Load Lightbox on click event</button>
<div class="lightbox" id="fl1">
    <h2>Delete Item</h2>
    <div class="row">
        <div class="twelve columns">
            <strong>Are you Sure?</strong>
            <br>blubblub?
        </div>
    </div>
    <div class="right"> <a href="#" class="btn btn_gray no text_none" id="close_button">Close</a>
    <a href="#" class="btn btn_red text_none">Yes</a>
    </div>
</div>

jQuery 部分:

<script type='text/javascript'> 
    window.onload=function(){
        $('button.#openbox').featherlight({
            targetAttr: 'href',
            beforeOpen: function(event){
                alert('beforeOpen');
            },
            afterOpen: function(event){
                alert('afterOpen');
            }
        });
    }           
</script>

检查此运行JSFiddle

如果您需要任何其他帮助，请告诉我。