Reputation: 206

How do I open and close a modal programmatically using Vue.js?

I've read through innumerable posts about how to do this with jquery, but Vue.js jealously owns and manages the dom, so I will need a solution that uses standard Vue.js components or libraries.

Thus far, I've located several examples that are what I'd call 'button-event-driven' solutions, but I will need to programmatically handle open and close of the modal.

Problem / Design Requirement: When a public user attempts to interact with a tempting button or other function on my application, and they are not yet logged in, I wish to programmatically launch a modal dialogue to then ask them to log in.

Once successfully, I'll need to programmatically close the same dialogue modal. Or, of course, they can choose to cancel and continue browsing as a public user without the ability to do those functions.

Other Helpful Information: I'm using bootstrap 4.4.1

Upvotes: 1

Answers (3)

Eaglechrome

Reputation: 445

The simple solution is:

add a reference to modal component

<share-modal ref="share-modal-ref"/>

import Modal like this:

import { Modal } from 'bootstrap'

then in your method do this:

let element = this.$refs.listModal.$el
let shareModal = new Modal(element, {})
shareModal.show()

It works on Vue 3 & Boostrap 5

Upvotes: 0

tuhin47

Reputation: 6068

You can use a watch property. If a user is not logged in as login=false then the modal shows.

// register modal component
Vue.component("modal", {
  template: "#modal-template"
});

// start app
new Vue({
  el: "#app",
  data: {
    showModal: false,
    login: null
  },
  created() {
    this.login = false;
  },
  watch: {
    "login": function(val) {
      this.showModal = !val;
    }
  }
});

.modal-mask {
  position: fixed;
  z-index: 9998;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: table;
  transition: opacity 0.3s ease;
}

.modal-wrapper {
  display: table-cell;
  vertical-align: middle;
}

.modal-container {
  width: 300px;
  margin: 0px auto;
  padding: 20px 30px;
  background-color: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.33);
  transition: all 0.3s ease;
  font-family: Helvetica, Arial, sans-serif;
}

.modal-header h3 {
  margin-top: 0;
  color: #42b983;
}

.modal-body {
  margin: 20px 0;
}

.modal-default-button {
  float: right;
}


/*
 * The following styles are auto-applied to elements with
 * transition="modal" when their visibility is toggled
 * by Vue.js.
 *
 * You can easily play with the modal transition by editing
 * these styles.
 */

.modal-enter {
  opacity: 0;
}

.modal-leave-active {
  opacity: 0;
}

.modal-enter .modal-container,
.modal-leave-active .modal-container {
  -webkit-transform: scale(1.1);
  transform: scale(1.1);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<!DOCTYPE html>
<html>

<head>
  <title>Modal Component</title>
  <link rel="stylesheet" type="text/css" href="/style.css" />
  <!-- template for the modal component -->
  <script type="text/x-template" id="modal-template">
    <transition name="modal">
      <div class="modal-mask">
        <div class="modal-wrapper">
          <div class="modal-container">

            <div class="modal-header">
              <slot name="header">
                default header
              </slot>
            </div>

            <div class="modal-body">
              <slot name="body">
                default body
              </slot>
            </div>

            <div class="modal-footer">
              <slot name="footer">
                default footer
                <button class="modal-default-button" @click="$emit('close')">
                    OK
                  </button>
              </slot>
            </div>
          </div>
        </div>
      </div>
    </transition>
  </script>
</head>

<body>
  <!-- app -->
  <div id="app">
    <!-- use the modal component, pass in the prop -->
    <modal v-if="showModal" @close="showModal = false">
      <!--
      you can use custom content here to overwrite
      default content
    -->
      <h3 slot="header">custom header</h3>
    </modal>
  </div>


</body>

</html>

Upvotes: 2

generic3892372

Reputation: 206

I was able to construct this using a project with a (relatively) recent example. Here is the component, as well as a 'Tester.vue' view that uses that component:

LoginModal.vue:

 <template>
  <transition name="modal-fade">
    <div class="modal-backdrop">
      <div
        class="modal"
        role="dialog"
        aria-labelledby="modalTitle"
        aria-describedby="modalDescription"
      >
        <header class="modal-header" id="modalTitle">
          <slot name="header">
            &nbsp;
          </slot>
        </header>
        <section class="modal-body" id="modalDescription">
          <slot name="body">
           Your Login Form Goes Here
                <button type="button" v-on:click="validateLoginForm">
                  Log In
                </button>
                <button type="button" @click="close" aria-label="Close modal">
                  Cancel
                </button>
          </slot>
        </section>
        <footer class="modal-footer">
          <slot name="footer"> </slot>
        </footer>
      </div>
    </div>
  </transition>
</template>

<script>
export default {
  name: "loginModal",

  data() {
    return {
      loginValidationAlerts: [],
    };
  },

  methods: {
    close() {
      this.$emit("close");
    },

    validateLoginForm() {
//Login Form Validations go here
    },

    clearAllLoginValidationErrors() {
      this.loginValidationAlerts = [];
    },

    attemptLogin() {
    // Your login code
    },
  },
};
</script>

<style>
.modal-fade-enter,
.modal-fade-leave-active {
  opacity: 0;
}

.modal-fade-enter-active,
.modal-fade-leave-active {
  transition: opacity 0.5s ease;
}

.modal-backdrop {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal {
  background: #ffffff;
  box-shadow: 2px 2px 20px 1px;
  overflow-x: auto;
  display: flex;
  flex-direction: column;
}

.modal-header,
.modal-footer {
  padding: 15px;
  display: flex;
}

.modal-header {
  border-bottom: 1px solid #eeeeee;
  color: #4aae9b;
  justify-content: space-between;
}

.modal-footer {
  border-top: 1px solid #eeeeee;
  justify-content: flex-end;
}

.modal-body {
  position: relative;
  padding: 20px 10px;
}

.btn-close {
  border: none;
  font-size: 20px;
  padding: 20px;
  cursor: pointer;
  font-weight: bold;
  color: #4aae9b;
  background: transparent;
}

.btn-green {
  color: white;
  background: #4aae9b;
  border: 1px solid #4aae9b;
  border-radius: 2px;
}
</style>

Tester.vue:

<template>
  <div>
    Test Page
    <div>
      <button type="button" class="btn" @click="showModal">
        Open Modal!
      </button>
    </div>
    <div>
      <LoginModal v-show="isModalVisible" @close="closeModal"></LoginModal>
    </div>
  </div>
</template>

<script>
import LoginModal from "@/components/LoginModal.vue";
export default {
  components: {
    // eslint-disable-next-line vue/no-unused-components

    LoginModal,
  },
  data() {
    return {
      isModalVisible: false,
    };
  },
  methods: {
    showModal() {
      // Do something here to determine
      // if you should show modal
      this.isModalVisible = true;
    },
    closeModal() {
      // this will catch the close event
      // after you're done processing the login in the component
      this.isModalVisible = false;
    },
  },
};
</script>

<style scoped></style>

The appearance of the view and its component is pretty rough and without much formatting, but you get the picture.

Hopefully this helps somebody else if they're looking for a straight-forward modal in Vue; I believe it has to be a very common design requirement, and this approach worked for me.

Upvotes: 0

How do I open and close a modal programmatically using Vue.js?

Answers (3)

Related Questions