CODEWITHSUNDEEP
javascripttwitter-bootstrapvue.jsbootstrap-4bootstrap-modal
user2353003
user2353003

Reputation: 552

Show Bootstrap4 modal without Jquery in VueJS

I'm trying to show a bootstrap modal from a function in VueJS. I'm basically looking for vanilla JS way of doing this: $('#myModal').modal("show"). There are ways to do this with BootstrapVue, but the project I'm currently using does not use bootstrapVue, just standard bootstrap4.

//component.vue

<template>
  <div>
    <button type="button" class="btn btn-primary">My Modal</button>
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-hidden="true">
      <div class="modal-dialog modal-lg">
        <div class="modal-content">
          ...
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  methods: {
    buttonClick() {
      // Need to display modal in here
      //$('#myModal').modal("show")
    }
  }
};
</script>

Upvotes: 3

Views: 5566

Answers (3)

artytech
artytech

Reputation: 1

The problem is that the backdrop is no longer operational. I mean, we want the modal to close when you click outside of it, but it is not in this case. A better solution would be to use a standard HTML dialog.

Upvotes: 0

minisaurus
minisaurus

Reputation: 1196

I did this:

<template v-if="showDialog">
  <div class="modal show" style="display: block;">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">{{ title }}</h5>
        </div>
        <div class="modal-body">
          <p> some stuff here </p>
        </div>
        <div class="modal-footer">
          <button class="btn btn-primary" type="submit"
            @click="emitSearch">
            Search
          </button>
          <button class="btn btn-secondary" type="button"
            @click="$emit ('close')">
            Cancel
          </button>
        </div>
      </div>
    </div>
  </div>
  <div class="modal-backdrop show"></div>
</template>

I pass showDialog as a prop, but I guess it could be in data()

Upvotes: 0

Mahmood A.Shakir
Mahmood A.Shakir

Reputation: 444

when you looking to bootstrap modal how work with jquery you will find they add a show class to the modal and change the style of the modal from style="display: none" to style="display:block"

and a div <div class="modal-backdrop fade show"></div> append to the body and this div is black overlay background behind the modal

so to do that you can do something like this:

<template>
  <div>
    <button type="button" class="btn btn-primary" @click="toggleModal">My Modal</button>
    <div
      ref="modal"
      class="modal fade"
      :class="{show, 'd-block': active}"
      tabindex="-1"
      role="dialog"
    >
      <div class="modal-dialog" role="document">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title">Modal title</h5>
            <button
              type="button"
              class="close"
              data-dismiss="modal"
              aria-label="Close"
              @click="toggleModal"
            >
              <span aria-hidden="true">&times;</span>
            </button>
          </div>
          <div class="modal-body">
            <p>Modal body text goes here.</p>
          </div>
        </div>
      </div>
    </div>
    <div v-if="active" class="modal-backdrop fade show"></div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      active: false,
      show: false
    };
  },
  methods: {
    /**
     * when clicking on button in bootstrap
     * the modal style set to display and after that a show class add to modal
     * so to do that we will show modal-backdrop and set modal display to block
     * then after that we will add show class to the modal and we will use setTimeout
     * to add show class because we want show class to add after the modal-backdrop show and modal display change
     * to make modal animation work
     *
     */
    toggleModal() {
      const body = document.querySelector("body");
      this.active = !this.active;
      this.active
        ? body.classList.add("modal-open")
        : body.classList.remove("modal-open");
      setTimeout(() => (this.show = !this.show), 10);
    }
  }
};
</script>

codesandbox demo

hope this can help you

Upvotes: 10

Related Questions