How to confirm by enter key - Remodal

Question

I've been using remodal for confirmation and notification pop-ups. What I fail to do so is allowing enter key submission. I tried searching for a solution, but it seems there are none on the web and the developer seems to be abandoned his work before the enter key issue is solved.

I tried using javascript switch-case codes but again, this creates a problem of changing focus if user decides to click something responsive before pressing the enter key, in addition, this method turns out to be extremely time consuming.

I turn around these 3 clues:

Clue 1: When a remodal window is opened, data-remodal-id attribute of div becomes the window location. Example = ../mypage.php#myremodal

Clue 2: Confirmation buttons have this attribute: data-remodal-action="confirm"

Clue 3: Remodal window is put front of page z-index.

I am trying to find a way that would simply simulate a .click() on confirm button of currently opened remodal. As I said, I tried switch(from){}inside opened remodal section and assigned from = $(e.currentTarget).attr("data-remodal-id"); in order to select which modal is confirmed, but this creates other problems due to structure and extemely time consuming for all confirmations to apply.

This is how remodal actions are controlled in the script:

$(document).on('opening', '.remodal', function() {
  console.log('Modal is opening');
});

$(document).on('opened', '.remodal', function() {
  //**************************************************
  //THIS IS WHERE I WANT TO PUT ENTER KEY CONFIRMATION
  //**************************************************
  console.log('Modal is opened');
});

$(document).on('closing', '.remodal', function(e) {

  // Reason: 'confirmation', 'cancellation'
  console.log('Modal is closing' + (e.reason ? ', reason: ' + e.reason : ''));
});

$(document).on('closed', '.remodal', function(e) {

  // Reason: 'confirmation', 'cancellation'
  console.log('Modal is closed' + (e.reason ? ', reason: ' + e.reason : ''));
});

$(document).on('confirmation', '.remodal', function() {
  console.log('Confirmation button is clicked');
 
 from = window.location.hash.substr(1)
          
 switch (from){

 case "1":
 //*********************
 // MY JSON ACTIONS HERE
 //*********************
 break;

 case "2":
 //*********************
 // MY JSON ACTIONS HERE
 //*********************
 break;
 

}
});

$(document).on('cancellation', '.remodal', function() {
  console.log('Cancel button is clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/remodal/1.1.1/remodal.min.js"></script>



<div class="remodal" data-remodal-id="myremodal">
  <button data-remodal-action="close" class="remodal-close"></button>
  
  <p>
    some text
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

<a data-remodal-target="myremodal">call the modal</a>

Answer 1

Instead of trying to implement an external way of adding this functionality, why not patching Remodal library, so that you get a cleaner solution?

The interesting part is here: https://github.com/vodkabears/Remodal/blob/1.1.1/src/remodal.js#L766-L771

// Handles the keydown event
$(document).on('keydown.' + NAMESPACE, function(e) {
  if (current && current.settings.closeOnEscape && current.state === STATES.OPENED && e.keyCode === 27) {
    current.close();
  }
});

That we can convert to:

// Handles the keydown event
$(document).on('keydown.' + NAMESPACE, function(e) {
  if (current && current.state === STATES.OPENED) {
    if (current.settings.closeOnEscape && e.keyCode === 27) {
      current.close();
    } else if (current.settings.confirmOnEnter && e.keyCode === 13) {
      current.close(STATE_CHANGE_REASONS.CONFIRMATION);
    }
  }
});

(and adding the confirmOnEnter option there)

You can see that patched version of Remodal here: https://github.com/ghybs/Remodal/blob/6942ef830e621a4de079e2b28a4aa02d3c2607a5/src/remodal.js

And use it e.g. using RawGit CDN:

<script src="https://cdn.rawgit.com/ghybs/Remodal/6942ef830e621a4de079e2b28a4aa02d3c2607a5/src/remodal.js"></script>

Now you have access to the new option "confirmOnEnter". Simply set it to true, and the open modal will close with "confirmation" reason when user presses the Enter key.

$(document).on('opening', '.remodal', function() {
  console.log('Modal is opening');
});

$(document).on('opened', '.remodal', function() {
  //**************************************************
  //THIS IS WHERE I WANT TO PUT ENTER KEY CONFIRMATION
  //**************************************************
  // => instead use the new "confirmOnEnter" option in modal configuration.
  console.log('Modal is opened');
});

$(document).on('closing', '.remodal', function(e) {

  // Reason: 'confirmation', 'cancellation'
  console.log('Modal is closing' + (e.reason ? ', reason: ' + e.reason : ''));
});

$(document).on('closed', '.remodal', function(e) {

  // Reason: 'confirmation', 'cancellation'
  console.log('Modal is closed' + (e.reason ? ', reason: ' + e.reason : ''));
});

$(document).on('confirmation', '.remodal', function() {
  console.log('Confirmation button is clicked');
 
 from = window.location.hash.substr(1)
          
 switch (from){

 case "1":
 //*********************
 // MY JSON ACTIONS HERE
 //*********************
 break;

 case "2":
 //*********************
 // MY JSON ACTIONS HERE
 //*********************
 break;
 

}
});

$(document).on('cancellation', '.remodal', function() {
  console.log('Cancel button is clicked');
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/ghybs/Remodal/6942ef830e621a4de079e2b28a4aa02d3c2607a5/src/remodal.js"></script>



<div class="remodal" data-remodal-id="myremodal" data-remodal-options="confirmOnEnter: true">
  <button data-remodal-action="close" class="remodal-close"></button>
  
  <p>
    some text
  </p>
  <br>
  <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
  <button data-remodal-action="confirm" class="remodal-confirm">OK</button>
</div>

<a data-remodal-target="myremodal">call the modal</a>

Answer 2

So if I understand you correctly, I made the modal confirm (same as clicking OK) when the user hits the enter key when the modal is open. You can try by using the below code for opened event

This works by listening on the keys (key down event) pressed inside the modal div. Then if one of those keys is the enter key it will click the confirm button automatically.

$(document).on('opened', '.remodal', function() {
  $("div[data-remodal-id='myremodal']" ).on('keydown', function(e) {
    if (e.which == 13) {
      $("button[data-remodal-action='confirm']" ).click();
    }
  });
});