javascript – 使用多个按钮触发相同的popbox

2023年9月25日 297次阅读

我想知道是否可以触发带有多个按钮的popbox(popbox.js).我基本上想在html中使用一个popbox布局,并从许多不同的地方触发它.对于模态我可以通过使用来做到这一点

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

然后定义我的模型

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

我觉得popbox也存在类似的东西？
谢谢
卡尔

最佳答案 不,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

点赞