We read every piece of feedback, and take your input very seriously.
To see all available qualifiers, see our documentation.
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
I am having trouble closing the modal using jquery.
vite vue jquery bootstrap 5.3
<template> <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal" > Launch demo modal </button> <!-- Modal --> <div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true" > <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <h1 class="modal-title fs-5" id="exampleModalLabel">Modal title</h1> <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button> </div> <div class="modal-body">...</div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button> <button type="button" class="btn btn-primary" @click="close()">Save changes</button> </div> </div> </div> </div> </template> <script setup> const close = () => { window.$('#exampleModal').modal('toggle') } </script> <style></style>
Windows
Chrome
v5.3.3
The text was updated successfully, but these errors were encountered:
I'd say that you need to get access to the instance of the modal. I'm not that familiar with Vue.js, but you could try to add this to the main.js:
main.js
import * as bootstrap from 'bootstrap'; window.bootstrap = bootstrap;
And then, in App.vue, something like:
App.vue
const close = () => { const modalInstance = bootstrap.Modal.getOrCreateInstance('#exampleModal'); modalInstance.hide(); };
Sorry, something went wrong.
No branches or pull requests
Prerequisites
Describe the issue
I am having trouble closing the modal using jquery.
vite vue jquery bootstrap 5.3
Reduced test cases
What operating system(s) are you seeing the problem on?
Windows
What browser(s) are you seeing the problem on?
Chrome
What version of Bootstrap are you using?
v5.3.3
The text was updated successfully, but these errors were encountered: