Question

我一直在使用remodal进行确认和通知弹出窗口。我没有这样做是允许输入密钥提交。我试图寻找一个解决方案，但似乎网络上没有，开发人员似乎在enter key issue解决之前放弃了他的工作。

我尝试使用javascript switch-case代码，但是如果用户在按下回车键之前决定点击响应，则会产生更改焦点的问题，此外，这种方法非常耗时。

我扭转了这三条线索：

线索1：当打开重建窗口时，div的data-remodal-id属性成为窗口位置。示例= ../mypage.php#myremodal

线索2：确认按钮具有以下属性：data-remodal-action="confirm"

线索3：将重新模式窗口置于页面z-index前面。

我正在尝试找到一种方法，只需模拟当前打开的remodal的确认按钮上的.click()。正如我所说，我在打开的remodal部分中尝试了switch(from){}并分配了from = $(e.currentTarget).attr("data-remodal-id");以便选择确认哪个模式，但是这会因结构而产生其他问题，并且所有确认应用都会耗费大量时间。

这是脚本中控制remodal操作的方式：

＆＃13;

$(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');
});

＆＃13;

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

＆＃13;

Answer 1

为什么不修补Remodal库，而不是尝试实现添加此功能的外部方式，以便获得更清晰的解决方案？

有趣的部分在这里：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();
  }
});

我们可以转换为：

// 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);
    }
  }
});

（并添加confirmOnEnter选项there）

您可以在此处查看已修补的Remodal版本：https://github.com/ghybs/Remodal/blob/6942ef830e621a4de079e2b28a4aa02d3c2607a5/src/remodal.js

并使用它，例如使用RawGit CDN：

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

现在您可以访问新选项“confirmOnEnter”。只需将其设置为true，当用户按下 Enter 键时，打开模态将以“确认”原因关闭。

$(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

因此，如果我理解正确，当用户在模态打开时按Enter键时，我会进行模态确认（与单击OK相同）。您可以尝试使用以下代码打开事件

这可以通过聆听模态div中按下的键（按键事件）来实现。然后，如果其中一个键是回车键，它将自动点击确认按钮。

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

如何通过回车键确认 - 重新模式

2 个答案: