2

Da para chamar uma modal do vue bootstrap usando um keyevent no VUEJS?? Eu não quero nenhuma especie de botão na tela ou inputs, quero saber se eu consigo chamar a modal apenas ao apertar uma tecla especifica. Como por exemplo o ALT.

0

3 Respostas 3

1

Você pode usar os Keyboard Events. Para saber o código de tecla use como referência: https://keycode.info/

Exemplo

$(document).keypress(function(event) {
  if (event.keyCode  == 13){
    $("#myModal").modal("show");
  }
  

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet"/>
<p>Esperando abrir o modal quando teclar enter</p>
<!-- The Modal -->
<div class="modal" id="myModal">
  <div class="modal-dialog">
    <div class="modal-content">

      <!-- Modal Header -->
      <div class="modal-header">
        <h4 class="modal-title">Modal Heading</h4>
        <button type="button" class="close" data-dismiss="modal">&times;</button>
      </div>

      <!-- Modal body -->
      <div class="modal-body">
        Modal body..
      </div>

      <!-- Modal footer -->
      <div class="modal-footer">
        <button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
      </div>

    </div>
  </div>
</div>

1

Você pode usar um input do tipo hidden para ser o acionador do evento.

Dessa forma, basta capturar a tecla que foi pressionada e disparar o evento trigger('click') para abrir o modal.

Aqui contém uma tabela com a numeração de disparo das teclas via javascript.

$(document).keyup(function(ev){
  if(ev.which == 18) { //numero da tecla ALT 
     $('#botaomodal').trigger('click')
  }
});
<span> Pressione "Alt" para exibir o modal </span>

<!-- Input do tipo hidden para disparar o evento  -->
<input type="hidden" id="botaomodal"  data-toggle="modal" data-target="#exampleModal">
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Modal Exemplo</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        Exemplo de modal
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>

1

Cara sua pergunta ficou um tanto quanto confusa, não sei se a solução que quer é com jQuery ou com Vue. "Lembrando que: Não é recomendado utilizar os dois por n motivos, tanto é que existe o próprio bootstrap do vue para não utilizar o bootstrap normal que usa jQuery." O meu exemplo é utilizando Vue, mas segue algumas considerações:

1 - O Vue por padrão necessita de um evento manipulador interno dele para que seja disparado juntamente com outro, ou seja, você não conseguirá abrir o modal apenas apertando a tecla alt ele precisa de um evento de click atrelado ao alt por exemplo.

2 - Como o usuário saberá que para abrir o modal é necessário apertar a tecla alt? Botões servem exatamente como um sinal de ação tratando-se de usabilidade!

Vue.component('modal', {
  template: `<div>
    <p @click.alt="abrirModal"><b-alert show variant="primary">Clique aqui e aperte alt para abrir o modal</b-alert></p>
   
    <b-modal ref="meuModal" id="meuModal" title="Bootstrap-Vue">
      <p class="my-4">Modal aberto!!</p>
    </b-modal>
  </div>`,
  methods: {
    abrirModal() {
      this.$refs.meuModal.show()
    }
  }
})

new Vue({
  el: '#app'
})
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap/dist/css/bootstrap.min.css"/>
<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.css"/>

<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="//unpkg.com/babel-polyfill@latest/dist/polyfill.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <modal></modal>
</div>

2
  • Obrigado, era sim com vue. Ando sofrendo com isso tem uns 3 dias, porquê neu preciso chamar esse modal sem que exista algo na tela. Apenas uma instrução indicando a tecla. Porém, obrigado
    – SkullFire
    9/10/2018 às 21:13
  • Você pode usar Bootstrap sem necessariamente ter que usar o Jquery ou Bootstrap-vue. basta remover as chamadas que utilizam Jquery e criar as ações que vão controlar o bootstrap dentro do Vue, com a sintaxe Vue ou com JavasCript puro. 17/09/2019 às 14:23

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 .