これは、ページを更新せずにモーダルを閉じるだけでなく、Enter キーを押すとモーダルが送信され、更新せずに閉じるためのスニペットです。
複数のモーダルを設定できるサイトに設定しており、一部のモーダルは送信時にデータを処理し、一部のモーダルは処理しません。私がしているのは、処理を行うモーダルごとに一意の ID を作成することです。たとえば、私のウェブページでは:
HTML (モーダル フッター):
<div class="modal-footer form-footer"><br>
<span class="caption">
<button id="PreLoadOrders" class="btn btn-md green btn-right" type="button" disabled>Add to Cart <i class="fa fa-shopping-cart"></i></button>
<button id="ClrHist" class="btn btn-md red btn-right" data-dismiss="modal" data-original-title="" title="Return to Scan Order Entry" type="cancel">Cancel <i class="fa fa-close"></i></a>
</span>
</div>
jQuery:
$(document).ready(function(){
// Allow enter key to trigger preloadorders form
$(document).keypress(function(e) {
if(e.which == 13) {
e.preventDefault();
if($(".trigger").is(".ok"))
$("#PreLoadOrders").trigger("click");
else
return;
}
});
});
ご覧のとおり、この送信は処理を実行するため、このモーダルにこの jQuery を使用しています。ここで、この Web ページ内に別のモーダルがあるとしますが、処理は実行されず、一度に 1 つのモーダルが開いているため$(document).ready()
、すべてのページが取得するグローバル php/js スクリプトに別のモーダルを配置し、モーダルの閉じるボタンに : というクラスを与えます".modal-close"
。
HTML:
<div class="modal-footer caption">
<button type="submit" class="modal-close btn default" data-dismiss="modal" aria-hidden="true">Close</button>
</div>
jQuery (global.inc を含む):
$(document).ready(function(){
// Allow enter key to trigger a particular button anywhere on page
$(document).keypress(function(e) {
if(e.which == 13) {
if($(".modal").is(":visible")){
$(".modal:visible").find(".modal-close").trigger('click');
}
}
});
});