javascript - 使用多个按钮触发同一弹出框

我想知道是否可以通过多个按钮触发一个popbox(popbox.js)。我基本上想要html中的一个popbox布局，并从许多不同的地方触发它。对于模态，我可以通过使用

data-toggle="modal" href="#contact-form"

然后用定义我的模型

<div class="modal fade" id="contact-form" role="dialog">
....

我猜popbox也有类似的东西吗？
谢谢
卡尔

最佳答案

不，popbox不会自然地支持它。
但是，您可以编写一个简单的脚本来启用弹出框的此类功能。

HTML示例:

<a href="#pop" data-toggle="popbox">Pop me!</a>

<button type="button" data-target="#pop" data-toggle="popbox">Pop me here too!</button>

<div id="pop" class='popbox'>
    <a class='open' href='#'>Click Here!</a>
    <div class='collapse'>
        <div class='box'>
            <div class='arrow'></div>
            <div class='arrow-border'></div>

            Content in PopBox goes here :)
            <a href="#" class="close">close</a>
        </div>
    </div>
</div>

脚本:

$(document).ready(function(){

    // setup popbox:
    $('.popbox').popbox({
        // ... options for popbox ...
    });

    // click event handler for each element with '[data-toggle="popbox"]' attr:
    $('[data-toggle="popbox"]').click(function(e){
        // stopPropagation must be used to stop event bubbling
        // otherwise, it will hide box immediately after open
        e.stopPropagation();
        e.preventDefault();
        // check if it's a link or another element:
        var box = $(this).attr('href') || $(this).attr('data-target');
        $(box).find('.open').trigger('click');
    });
});

JSFiddle