How to make a confirmation modal with Remodal

Question

I use Remodal ( https://github.com/VodkaBears/Remodal#remodal ) to make some modals, normally I use only the alert modal but now I want to use a confirmation modal.

I have made a delete button with a confirmation modal, I have the following code:

$('#delete_button').click(function() {
    $('[data-remodal-id = modal-delete]').remodal().open();
    $(document).on('confirmation', '#modal-delete', function () {
        alert('Confirmation button is clicked');
    });
    $(document).on('cancellation', '#modal-delete', function () {
        alert('Cancel button is clicked');
    });
});

<div class="remodal" data-remodal-id="modal-delete">
    <div class="h1_modal">Delete confirmation</div> 
    <div class="p_modal">Are you sure?</div>
    <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
    <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

The modal is opening when I click on the button with the id delete_button but when I choose Cancel or OK, I don't see any alert. How can I get this working?

Kind regards,

Arie

There are a couple issues I can see right off the bat: I don't see the `#delete_button` element in your HTML and your event delegation seems useless unless supporting code is missing from your post. — NightOwlPrgmr, Aug 04 '15 at 11:39

score 3 · Accepted Answer · answered Aug 06 '15 at 10:05

My solution for this:

HTML:

 <div data-remodal-id="alert">
  <a data-remodal-action="cancel" class="remodal-cancel">X</a>

  <div id="confirmation-box">
    <p>You didn't create your alert. Do you really want to close this form?</p>
    <a href="#" data-remodal-action="close" class="btn remodal-close">
      <span>Close</span>
    </a>
    <a href="#" data-remodal-action="confirm" class="btn remodal-confirm">
      <span>No</span>
    </a>
  </div>

JS:

var remodalInst = $('[data-remodal-id=alert]').remodal({
    closeOnConfirm: false
});

$(document).on('cancellation', '.remodal', function () {
    // disable other close options while modal is open
        remodalInst.settings = {
            closeOnCancel: false,
            closeOnEscape: false,
            closeOnOutsideClick: false
        }
   // show confirmation window
        $('#confirmation-box').show();
   // hide confirmation window after clicking "no" without hiding whole modal
        $(document).on('confirmation', '.remodal', function () {
            $('#confirmation-box').hide();
        });
});

Light · Answer 2 · 2015-08-04T11:45:35.887

0

Add cancel and ok click event outside of delete click event:

$('#delete_button').click(function() {
    $('[data-remodal-id = modal-delete]').remodal().open();
    // delete logic
});

$(document).on('click', '.remodal-confirm', function () {
        alert('Confirmation button is clicked');
});
$(document).on('click', '.remodal-cancel', function () {
        alert('Cancel button is clicked');
});

edited Aug 04 '15 at 11:45

answered Aug 04 '15 at 11:39

Light

1,077
10
33

How to make a confirmation modal with Remodal

2 Answers2