Question

嗨，我在我的网站上使用了这些“模态” /对话框。如果我没记错的话，我正在使用W3-Schools的jQuery代码。它们工作正常，我可以通过在框外单击来关闭它们，但是我无法使用ESC键将它们关闭。我在上面的页面有6个作为难度因素。任何帮助将不胜感激。

这是对话框和打开按钮的代码

// Get the modal
var modal1 = document.getElementById('service1');
window.onclick = function(event) {
  if (event.target == modal1) {
    modal1.style.display = "none";
  }
}

// These are the new code for using the ESC key (keycode = 27), but I have  not had any luck

$("window").keydown(function(event) {
  if (event.which == 27 & event.target == modal1) {
    modal1.style.display = "none";
  }
})


window.keydown = function(event) {
  if (event.which == 27 & event.target == modal1) {
    modal1.style.display = "none";
  }
}

#service1 { display:none }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="button" onclick="document.getElementById('service1').style.display='block'"> Some Text
    </button>


<div id="service1" class="w3-modal w3-margin-top">
  <div class="w3-modal-content  w3-card-4 w3-animate-top" style=" top:50px; width:61%; height:auto">
    <header class="w3-container" style="height:auto;
                 background-color:#FE0565 ; color:#fff ;">
      <span onclick="document.getElementById('service1').style.display='none'"> 
                  <i class="fa fa-close"></i></span>
      <h2 style="text-align: center; font-size:34px; position: 
                  relative;width:54%;margin-left:20%; top:0px; 
                   text-decoration: underline"><b>Hard Drive</b></h2>
    </header>
    <div style="height:200px;">

      <p></p>
    </div>
    <footer class="container" style="background-color:  
                   #FE0565; color:#fff;">
      <a href="/#">
        <h3>For More Info Click Here</h3>
      </a>
      <span onclick="document.getElementById('service1').style.display='none'">  
                  <i class="fa fa-close"></i></span>
    </footer>
  </div>
</div>

Answer 1

尝试一下：

$(document).on("click", ".w3-modal",function(event) {
  $(this).hide(); // hide when clicked
});

// if you want to hide when clicked outside try something like this
/*
$(document).on("click",function(event) {
  var $tgt = $(event.target);
  if (!$tgt.is(".w3-modal") && !$tgt.is(".modalbut")) $(".w3-modal").hide(); // hide when clicked outside
});

*/
// These are the new code for using the ESC key (keycode = 27), but I have  not had any luck

$(document).keydown(function(e) {
  var code = e.keyCode || e.which;
  if (code == 27) $(".w3-modal").hide();
});

#service1 {
  display: none
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="modalbut button" onclick="document.getElementById('service1').style.display='block'"> Some Text
    </button>


<div id="service1" class="w3-modal w3-margin-top">
  <div class="w3-modal-content  w3-card-4 w3-animate-top" style=" top:50px; width:61%; height:auto">
    <header class="w3-container" style="height:auto;
                 background-color:#FE0565 ; color:#fff ;">
      <span onclick="document.getElementById('service1').style.display='none'"> 
                  <i class="fa fa-close"></i></span>
      <h2 style="text-align: center; font-size:34px; position: 
                  relative;width:54%;margin-left:20%; top:0px; 
                   text-decoration: underline"><b>Hard Drive</b></h2>
    </header>
    <div style="height:200px;">

      <p></p>
    </div>
    <footer class="container" style="background-color:  
                   #FE0565; color:#fff;">
      <a href="/#">
        <h3>For More Info Click Here</h3>
      </a>
      <span onclick="document.getElementById('service1').style.display='none'">  
                  <i class="fa fa-close"></i></span>
    </footer>
  </div>
</div>

Answer 2

如果您有多个模态，则可以使用以下脚本。我必须在一页中打开这么多模态，这就是为什么我编写此脚本的原因。该脚本使用转义键根据打开顺序逐个关闭模态。而且您也不需要在脚本中定义任何模式名称，因此可以在任何地方添加一次使用。

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!");
            }
        }
    };

});

如何使用ESC键关闭模式/对话框？

2 个答案: