Howto Colorbox

Повседневные случаи использования Colorbox.

colorbox-gallery.js

$('.js-gallery').colorbox({rel:'gal'});

<a class="js-popup" href="#js-popup-form">Click me</a>
<div style="display:none">
  <div id="js-popup-form">
    Popup
  </div>
</div>

colorbox-form-popup.js

$('.js-popup').colorbox({inline: true, opacity: 0.6});

colorbox-ajax-popup.js

$.colorbox({href:"/thankyou.html"});

colorbox-html-popup.js

$.colorbox({html: "<h1>Welcome</h1>"});

По клику меняется ссылка «Да». «Нет» - закрытие попапа.

colorbox-click-popup.html

<div style="display:none;">
  <div id="js-popup-form">
    <p>Вы уверены?</p>
      <a class="js-popup-yes">Да</a>
      <div class="js-popup-no">Нет</div>
  </div>
</div>
 
<a class="js-popup" href="#" data-href="/action/delete.php">Удалить</a>

colorbox-click-popup.js

$(function() {
  initPopupForm($('.js-popup'));
});
 
function initPopupForm($control) {
  if(!$control.length) return;
  var $form = $('#js-popup-form');
 
  $form.find('.js-popup-no').on('click', function(){
    $.colorbox.close();
  });
 
  $control.on('click', function(e){
    e.preventDefault();
    var $elm = $(this);
    $.colorbox({
      inline: true,
      href: "#js-popup-form",
      onOpen: function() {
        $form.find('.js-popup-yes').attr('href', $elm.attr('data-href'));
      }
    });
  });
}

Документация