如何使用代码而不是单击按钮弹出 javascript 模态

Question

I have the following modal:

<div class="modal fade" id="m_modal_1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">

I have the following button that pops up the modal:

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#m_modal_1"> Launch Modal</button>

Instead of initiating from the button, how do I popup from code? I was thinking something like this:

if(status == 1){

    modal("show");
}

Answer 1

Assuming that you're using Bootstrap (based on the classes).

You can use the following:

$('#m_modal_1').modal('show')

Answer 2

You need to add eventlistener to any element, so once the event is triggered you change classes of the modal element or style.

Assuming you have some element (ie button with classname btn and modal with classname modal)

document.querySelector('.btn').addEventListener('click', () => {
  document.querySelector('.modal').classList.toggle('hidden');
}

And your css can be like this

.hidden {
  display: none;
  // or
  opacity: 0;
}

Answer 3

I think you are using bootstrap. so in your case

if(status == 1){

    $("#m_modal_1").modal("show");
}

"show" is a option of modal function. See more option and usage here https://getbootstrap.com/docs/4.0/components/modal/#options

Answer 4

Basically it depends on when you want to popup your modal.suppose you want to popup on page ready then,

$(document).ready(function(e){
$(#modal_id).show();
});