19

モーダル ボックスのポップアップ機能を作成しました。すべてのブラウザで、誰かがエスケープ キーを押したときに、このモーダル ポップアップ ボックスを閉じたいと思います。modal-window.min.jsこれらのポップアップにファイルを使用しました。

このキーに応答してこれらを閉じるにはどうすればよいですか?

4

7 に答える 7

19 
$(document).keypress(function(e) { 
    if (e.keyCode === 27) { 
        $("#popdiv").fadeOut(500);
        //or
        window.close();
    } 
});
于 2012-10-10T09:53:25.730 に答える
9

jQuery以外のソリューションを探してこれにたどり着いた人は、次のとおりです。

document.addEventListener('keydown', (event) => {
  if (event.key === 'Escape') {
    // close modal here
  }
})
于 2020-06-16T13:15:53.157 に答える
2

複数のモーダルがある場合は、以下のスクリプトを使用できます。1 つのページで非常に多くのモーダルを開く必要があったため、このスクリプトを作成しました。このスクリプトは、モーダルをエスケープキーで開いた順に一つずつ閉じます。また、スクリプトでモーダル名を定義する必要がないため、一度追加するとどこでも使用できます。

var modals=[]; // array to store modal id

$(document).ready(function(){

$('.modal').modal({show: false, keyboard: false}); // disable keyboard because it conflicts below

$('.modal').on('show.bs.modal', function (event) {
   //add modal id to array
   modals.push(event.target.id);
});


document.onkeydown = function(evt) {
    evt = evt || window.event;
    var isEscape = false;
    if ("key" in evt) {
        isEscape = (evt.key === "Escape" || evt.key === "Esc");
    } else {
        isEscape = (evt.keyCode === 27);
    }
    if (isEscape) {

        if(modals.length>0){
            //get last modal id by using pop(). 
            //This function also removes last item in array.
            var id = modals.pop();
            if($('#'+id).is(':visible')){ // if modal is not closed by click or close button
                $('#'+id).modal('toggle');
            }
        }else{
            alert("Could not find any modals!");
        }
    }
};

});
于 2019-05-08T10:00:46.693 に答える
2 
<script type="text/javascript">
 jQuery(document).keypress(function(e) {
  if (e.keyCode === 27) {
   jQuery("#myModal").modal('toggle');
                 OR
   jQuery("#myModal").modal('hide');
  }
 });
</script>

出典: http://chandreshrana.blogspot.in/2016/05/how-to-close-model-popup-on-escape-key.html

于 2016-05-26T05:20:06.143 に答える
-1

AngularJs の使用: 複数のモーダルがある場合、

各モーダルに値を割り当てます。モーダルを開くときは true に設定し、閉じるときは false に設定します。

//in your .js script

    document.onkeydown = function (event) {
    event = event || window.event;
    if (event.keyCode === 27) {
        if (usersModal)
            $scope.hideUsersModal();
        else if (groupsModal)
            $scope.hideGroupsModal();
    }

Angular を使用すると、event.targetプロパティは ng-controller を設定した場所を示しevent.currentTarget、#document.

于 2017-03-28T10:01:52.910 に答える