Topic: ho to call a modal whith bootstrap5 in js
Hello, simple question, How to open a Bootstrap modal window using JavaScript ? thx.
yes and it says:
Uncaught TypeError: document.getElementById(...).showModal is not a function
gshell commented 4 years ago
Sorry, I should have tested first. I added another comment with working samples.
In your javascript, you can mimic the user clicking the close button for the modal with the following:
document.getElementById("btnClose").click();
gshell commented 4 years ago
The same can be done to invoke the modal. You can add a hidden button that the script "clicks" to launch.
Please prepare a snippet, which shows your issue. We could then help you fixing the problem.
Also here's the js initialization method for modals:
const myModal = new mdb.Modal(document.getElementById('myModal'), options)
Best regards
May I jump in here? I am having the same problem, besides I would like to be able to open several modals at once on page load (in case I have several system notices). Here is my snippet: https://mdbootstrap.com/snippets/standard/webshapers/2760991 Thank you! Thomas
I managed a workaround now with... jQuery :-(
$(document).ready(function() {
// Init modal
$('.modal.status-message').fadeIn();
// Modal Closure
$('.close').on('click', function () {
$(this).parents('.modal').fadeOut();
});
});
Most probably NOT the way to do it, but it works...
Grzegorz Bujański commented 4 years ago
Unfortunately, your snippet doesn't work. You probably didn't click publish. Publish it, I'll check why it doesn't work for you without jQuery.
webshapers pro premium priority commented 4 years ago
Oups - sorry, Grzegorz! This is my first snippet here... Should work now! Thank you so much!
Looks like a bug with Bootstrap modals: https://github.com/twbs/bootstrap/issues/31452
You can open a modal with the public method:
const myModal = new mdb.Modal(document.getElementById('myModal'), {
backdrop: false
})
myModal.show();
webshapers pro premium priority commented 4 years ago
Works like a charm now in the snippet, even with 3 different modals. But when I try to implement it into my local drupal install (external global.js file) I get "Uncaught (in promise) ReferenceError: mdb is not defined at document.body.onload" :-(
webshapers pro premium priority commented 4 years ago
Update: this happens only on certain pages like my style guide. For most other pages it seems to be fixed. Need to find out the difference... Thank you!!!
Grzegorz Bujański commented 4 years ago
I hope you will find a solution quickly.
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Resolved
- User: Free
- Premium support: No
- Technology: MDB Standard
- MDB Version: 2.0.0
- Device: pc
- Browser: FFX
- OS: w10
- Provided sample code: No
- Provided link: No