Topic: ho to call a modal whith bootstrap5 in js

fabrice clamens free asked 3 years ago


Hello, simple question, How to open a Bootstrap modal window using JavaScript ? thx.


Grzegorz Bujański staff answered 3 years ago


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 priority commented 3 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 priority commented 3 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 3 years ago

I hope you will find a solution quickly.


webshapers priority answered 3 years ago


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 3 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 priority commented 3 years ago

Oups - sorry, Grzegorz! This is my first snippet here... Should work now! Thank you so much!


webshapers priority answered 3 years ago


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


Mikołaj Smoleński staff answered 3 years ago


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


gshell free answered 3 years ago


In your javascript, you can mimic the user clicking the close button for the modal with the following:

document.getElementById("btnClose").click();


gshell free commented 3 years ago

The same can be done to invoke the modal. You can add a hidden button that the script "clicks" to launch.


fabrice clamens free answered 3 years ago


yes and it says:

Uncaught TypeError: document.getElementById(...).showModal is not a function


gshell free commented 3 years ago

Sorry, I should have tested first. I added another comment with working samples.


gshell free answered 3 years ago


Have you tried using showModal()?

document.getElementById("myDialog").showModal();



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Resolved

Specification of the issue

  • ForumUser: 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