How to open a modal for a particular ID in vanilla JavaScript

Question

In Bootstrap, to open a pop-up window, you do this, using jQuery:

$('#edit_modal').modal();

You call the modal function for this ID. What is the equivalent in vanilla JavaScript? I tried:

document.getElementById("edit_modal").modal();

and I get:

document.getElementById(...).modal is not a function

What am I missing? How can I call a function for a particular ID?

Thanks.

Maybe are you finding this article https://stackoverflow.com/questions/16778336/modal-dialog-without-jquery? — artgb, Oct 30 '17 at 18:14
@ZakariaAcharki Actually it's a Bootstrap function which requires jQuery (https://getbootstrap.com/docs/3.3/javascript/#modals). jQuery UI has a similar `dialog()` function however. — j08691, Oct 30 '17 at 18:16
@ZakariaAcharki The modal is an example. I am aksing how can I call a function for a particular id , in general, using vanilla js. — slevin, Oct 30 '17 at 18:16
If you know that `modal` is not a method of HTML elements, what is your question? — Ruan Mendes, Oct 31 '17 at 12:57

score 1 · Answer 1 · answered Oct 30 '17 at 19:03

As others have indicated in the comments, .modal() is a method specific to Bootstrap/jQuery, which is why you can't call it via "regular" JavaScript.

However, for standard DOM methods, your syntax would work. For example,

document.getElementById("edit_modal").focus();

or

document.getElementById("edit_modal").blur();

would both work fine with vanilla JavaScript.

score 0 · Answer 2 · answered Oct 30 '17 at 18:54

0

You could use several ways, try :

document.getElementById('elem_id')
document.getElementById('elem_id')[0]
document.querySelector('#elem_id')
document.querySelectorAll('#elem_id')[0]

Hope this helps.

answered Oct 30 '17 at 18:54

Zakaria Acharki

66,747
15
75
101

The second line returns undefined – Ruan Mendes Oct 31 '17 at 12:56

score 0 · Answer 3 · answered Mar 12 '22 at 00:23

Since Materialize CSS now is not JQuery-dependent, the answer to your question is in their website:

document.addEventListener('DOMContentLoaded', function() {
    var elems = document.querySelectorAll('.modal');
    var instances = M.Modal.init(elems, options);
  });
``````

This is the link to their website: https://materializecss.com/modals.html

How to open a modal for a particular ID in vanilla JavaScript

3 Answers3