Bootstrap 3模态:如何使用jquery / javascript检查模态是打开还是关闭

时间:2022-03-11 07:36:37

Can anyone please tell me how to check bootstrap 3.0 modal status, is it open or closed using jQuery or javascript. I used following code but it works when you have opened a modal for one time otherwise gives data undefined error.

谁能告诉我如何检查bootstrap 3.0模态状态,是使用jQuery还是javascript打开或关闭。我使用了以下代码,但是当你打开一个模态一次时它会起作用,否则会给出数据未定义的错误。

if($('#addMemberModal').data('bs.modal').isShown == true){
console.log("Modal is open");
}

4 个解决方案

#1


33  

You can also use straight jQuery like this:

你也可以像这样使用直接jQuery:

$('#myModal').is(':visible');

#2


21  

you can refer to their page http://getbootstrap.com/javascript/#modals

你可以参考他们的页面http://getbootstrap.com/javascript/#modals

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

show.bs.modal
This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

show.bs.modal调用show实例方法时,会立即触发此事件。如果由单击引起,则单击的元素可用作事件的relatedTarget属性。

shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.

shown.bs.modal当模式对用户可见时将触发此事件(将等待CSS转换完成)​​。如果由单击引起,则单击的元素可用作事件的relatedTarget属性。

hide.bs.modal
This event is fired immediately when the hide instance method has been called.

hide.bs.modal调用hide实例方法时会立即触发此事件。

hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). loaded.bs.modal This event is fired when the modal has loaded content using the remote option.

hidden.bs.modal当模态完成对用户的隐藏时将触发此事件(将等待CSS转换完成)​​。 loaded.bs.modal当模式使用remote选项加载内容时会触发此事件。

#3


3  

try checking:

if($("#addMemberModal").data('modal') && $("#addMemberModal").data('modal').isShown ) {
    console.log("Modal is open");
}

or

if( $('#addMemberModal').hasClass('in') ) {
    console.log("Modal is open");
}

#4


0  

if the modal is opened in a form loaded by ajax you can use

如果在ajax加载的表单中打开模态,则可以使用

$(document).on('hidden.bs.modal', '#photoModal', function () {
    cancel_camera();
    document.getElementById('PhotoPerson').innerHTML = '<img src="' +  photoPerson + '"/>';
});*

#1


33  

You can also use straight jQuery like this:

你也可以像这样使用直接jQuery:

$('#myModal').is(':visible');

#2


21  

you can refer to their page http://getbootstrap.com/javascript/#modals

你可以参考他们的页面http://getbootstrap.com/javascript/#modals

$('#myModal').on('hidden.bs.modal', function (e) {
  // do something...
})

show.bs.modal
This event fires immediately when the show instance method is called. If caused by a click, the clicked element is available as the relatedTarget property of the event.

show.bs.modal调用show实例方法时,会立即触发此事件。如果由单击引起,则单击的元素可用作事件的relatedTarget属性。

shown.bs.modal
This event is fired when the modal has been made visible to the user (will wait for CSS transitions to complete). If caused by a click, the clicked element is available as the relatedTarget property of the event.

shown.bs.modal当模式对用户可见时将触发此事件(将等待CSS转换完成)​​。如果由单击引起,则单击的元素可用作事件的relatedTarget属性。

hide.bs.modal
This event is fired immediately when the hide instance method has been called.

hide.bs.modal调用hide实例方法时会立即触发此事件。

hidden.bs.modal This event is fired when the modal has finished being hidden from the user (will wait for CSS transitions to complete). loaded.bs.modal This event is fired when the modal has loaded content using the remote option.

hidden.bs.modal当模态完成对用户的隐藏时将触发此事件(将等待CSS转换完成)​​。 loaded.bs.modal当模式使用remote选项加载内容时会触发此事件。

#3


3  

try checking:

if($("#addMemberModal").data('modal') && $("#addMemberModal").data('modal').isShown ) {
    console.log("Modal is open");
}

or

if( $('#addMemberModal').hasClass('in') ) {
    console.log("Modal is open");
}

#4


0  

if the modal is opened in a form loaded by ajax you can use

如果在ajax加载的表单中打开模态,则可以使用

$(document).on('hidden.bs.modal', '#photoModal', function () {
    cancel_camera();
    document.getElementById('PhotoPerson').innerHTML = '<img src="' +  photoPerson + '"/>';
});*