ho to call a modal whith bootstrap5 in js

Topic: ho to call a modal whith bootstrap5 in js

fabrice clamens free asked 4 years ago

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

Add comment

Grzegorz Bujański staff answered 4 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 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 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 3 years ago

I hope you will find a solution quickly.

Add comment

webshapers priority answered 4 years ago

0 0 Best answer

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

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

Add comment

webshapers priority answered 4 years ago

0 0 Best answer

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

Add comment

Mikołaj Smoleński staff answered 4 years ago

0 0 Best answer

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

Add comment

gshell free answered 4 years ago

0 0 Best answer

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 4 years ago

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

Add comment

fabrice clamens free answered 4 years ago

0 0 Best answer

yes and it says:

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

gshell free commented 4 years ago

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

Add comment

gshell free answered 4 years ago

0 0 Best answer

Have you tried using showModal()?

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

Add comment

Write

Create snippet

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

fabrice clamens

30Support score
2Questions 2Answers 2Snippets