запускать тот же popbox с несколькими кнопками

Question

Мне было интересно, можно ли запускать popbox (popbox.js) с несколькими кнопками. Я в основном хочу один макет попбокса в html и запускать его из разных мест. Для модальностей я могу сделать это с помощью

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

и чем определить мою модель с

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

Я думаю, что-то подобное существует и для Popbox? благодаря Карл

Answer 1

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

Надеюсь, что это поможет!