Launch the same popbox with multiple buttons

Question

I was wondering if it is possible to run popbox (popbox.js) with multiple buttons. I basically want a single popbox layout in html and run it from different places. For modals, I can do this using

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

and how to determine my model using

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

I think something like this also exists for popbox? thanks Carl

Answer 1

No, popbox does not support this natively.
However, you can write a simple script that allows you to use such functions for a popup.

HTML example:

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

Script:

$(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 a link or another element:
        var box = $(this).attr('href') || $(this).attr('data-target');
        $(box).find('.open').trigger('click');
    });
});

Jsfiddle

Answer 2

( ) , , 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>

, !