CODEWITHSUNDEEP
javascriptjqueryhtml
carl
carl

Reputation: 4436

trigger the same popbox with multiple buttons

I was wondering whether it is possible to trigger a popbox (popbox.js) with multiple buttons. I basically want one popbox layout in html and trigger it from many different places. For modals I can do that by using

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

and than define my model with 

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

I guess something like that also exists for popbox? thanks carl

Upvotes: 4

Views: 605

Answers (2)

jennEDVT
jennEDVT

Reputation: 739

From the (very limited) popbox docs, there doesn't seem to be a way to do it from the HTML, but you could write some jquery to do the trick:

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

Hope that helps!

Upvotes: 0

Artur Filipiak
Artur Filipiak

Reputation: 9157

No, popbox doesn't suports that natively.
You can however write a simple script that will enable such functionality for the popbox.

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

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

JSFiddle

Upvotes: 2

Related Questions