Confirm dialog

Let LexyBox handle classic confirm dialogs.

Dialog one , Dialog two

HTML

<!-- HTML for link one -->
<a href="#secret" data-confirm="Wanna see something cool?" class="lightbox">
  Dialog one
</a>

<!-- HTML for link two -->
<a href="#secret" data-confirm="Wanna go to the stackoverflow?" class="lightbox">
  Dialog two
</a>

JS

// Init new LexyBox
var lexybox = new LexyBox('.lightbox', {

  // Set new theme
  theme: 'confirm',

  // Force single mode
  single: true,

  // Change close text
  close: 'This will cancel modal too',

  // After open callback
  after_open: function(media) {

    // Click on cancel button
    document.getElementById('cancel').addEventListener('click', function(event) {

      // Prevent default
      event.preventDefault();

      // Close lexybox
      lexybox.close();

    });

  }

});

// Add new service
lexybox.add_service('confirm_dialog', {

  // Set template
  html: '<div class="confirm">%message<br> <a href="#" class="button" id="cancel">Cancel</a> <a href="%url" class="button button--color-primary">Confirm</a></div>',

  // Set finder
  finder: function(url, link) {
    return true;
  },

  // Set parser
  parser: function(url, link) {
    return {message: link.getAttribute('data-confirm'), url: url};
  }

});

CSS

/*
  lexybox
  ***
*/

.lexybox--theme-confirm {
  background-color: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 250ms linear;
}

/* - visible */

.lexybox--theme-confirm.lexybox--visible {
  opacity: 1;
}

/*
  lexybox-control--close
  ---
*/

.lexybox--theme-confirm .lexybox-control--close {
  position: absolute;
  right: 24px;
  bottom: 24px;
  text-align: center;
}

@media (max-width: 500px) {

  .lexybox--theme-confirm .lexybox-control--close {
    left: 6%;
    right: 6%;
  }

}

/*
  lexybox-content
  ***
*/

.lexybox-content {
  transform: scale(0.7);
  opacity: 0;
  transition: opacity 250ms linear, 250ms transform ease-in-out;
}

/* - visible */

.lexybox--visible .lexybox-content {
  transform: scale(1);
  opacity: 1;
}

/*
  confirm
  ***
*/

.confirm {
  width: 360px;
  position: absolute;
  left: 50%;
  top: 25%;
  bottom: auto;
  margin-left: -212px;
  padding: 28px 32px;
  background-color: #fff;
  box-shadow: 0 0 32px rgba(0, 0, 0, 0.07);
  border-radius: 6px;
  text-align: center;
}

@media (max-width: 500px) {

  .confirm {
    width: auto;
    left: 6%;
    top: 6%;
    right: 6%;
    margin-left: 0;
  }

}

/*
  adjust button
  ---
*/

.confirm .button {
  margin: 16px 6px 0 6px;
}