Question

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

来做到这一点

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

然后用

定义我的模型

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

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

Answer 1

不， 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

Answer 2

从（非常有限的）popbox文档中，似乎没有办法从HTML中执行此操作，但您可以编写一些jquery来执行此操作：

// In your javascript Save a string containing the popbox HTML in a variable
var myPopBox =
    "<div 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>"

  // Also in your javaScript append that variable to whatever elements contain this class in   
  // your HTML            
  $('.open_recommend').append(myPopBox);

// In the HTML on your button(s) call the popbox function as your click event
<button class="open_recommend" onclick="$('.open_recommend').popbox()">Recommend</button>

希望有所帮助！

用多个按钮触发相同的popbox

2 个答案: