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 staff 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 staff 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