0

Como posso fechar um modal em bootstrap usando a tecla enter:

o código que estou usando é o seguinte:

<div class="modal fade" id="succes-action" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
    <div class="modal-content modal-position-medium">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
            @if (ViewBag.Success == true) {
                <h4 class="modal-title modal-title-bold" id="myModalLabel"><span class="modal-logo glyphicon glyphicon-ok-circle" aria-hidden="true"></span>Sucesso</h4>
            }
            else {
                <h4 class="modal-title modal-title-bold" id="myModalLabel"><span class="modal-logo error glyphicon glyphicon-remove-sign" aria-hidden="true"></span>Erro</h4>
            }
        </div>
        <div class="modal-body">
            @if (ViewBag.Success == true) {
                <p>Um email foi enviado para <b>@ViewBag.EmailLabel</b> contento instruções para redefinir sua senha.</p>
            }
            else {
                <p>Não foi possível enviar um email para <b>@ViewBag.EmailLabel</b> contento instruções para redefinir sua senha.</p>
                <p>Por favor, contate a equipe de suporte do sistema PRODANÇA.</p>
            }
        </div>
        <div class="modal-footer">
            <button type="button" data-dismiss="modal" aria-hidden="true" class="btn btn-primary btn-min-size">OK</button>
        </div>
    </div>
</div>

1
  • Se a minha resposta te ajudou de alguma maneira, marque como aceita. Commented 31/03/2018 às 18:48

1 Resposta 1

1

Desse jeito, o evento keypress vai ficar monitorando sempre que alguma tecla é pressionada, e quando for o enter (código 13), irá fechar o modal.

$(document).ready(function() {
  $(document).on('keypress', function(e) {
    if(e.keyCode == 13) {
      $('.modal').modal('hide');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

1
  • Funcionou perfeitamente. Commented 2/04/2018 às 23:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .