これは、ページを更新せずにモーダルを閉じるだけでなく、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');
}
}
});
});