Key modal Event

Question

Can you call a Vue bootstrap modal using a keyevent in VUEJS?? I don’t want any kind of button on the screen or inputs, I want to know if I can call the modal just by pressing a specific key. Such as the ALT.

Answer 1

You can use the Keyboard Events. To know the key code use as reference: https://keycode.info/

Example

$(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>

Answer 2

You can use a input of the kind hidden to be the acionador of the event.

That way, just capture the key that was pressed and trigger the event trigger('click') to open the modal.

Here contains a table with the trigger numbering of the keys 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>

Answer 3

Your question has gotten a bit confused, I don’t know if the solution you want is with jQuery or with Vue. "Remembering that: It is not recommended to use both by n reasons, so much so that there is itself bootstrap Vue to not use normal bootstrap using jQuery." My example is using Vue, but it follows some considerations:

1 - Vue by default requires an internal manipulator event of it to be fired along with another, that is, you will not be able to open the modal just by pressing the key alt he needs an event of click attached to the alt for example.

2 - How the user will know that to open the modal it is necessary to press the key alt? Buttons serve exactly as a sign of action in the case of usability!

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>