关闭bootstrap模式而不使用“hide”和“data-dismiss”

I want to close bootstrap modal box conditionally. If I use $('#modal').modal('hide'); this, some thing goes wrong with my code. And If I use data-dismiss="modal" in the HTML template, modal dismiss action performs before my actual functionality should be perform on button click.

我想有条件地关闭bootstrap模态框。如果我使用$('#modal')。modal('hide');这个,我的代码出了点问题。如果我在HTML模板中使用data-dismiss =“modal”,则在按钮点击之前应执行实际功能之前执行模态解除操作。

So, there is any other way to close bootstrap modal or any idea to use data-dismiss="modal" at run time?

那么,有没有其他方法可以关闭bootstrap模式或任何想法在运行时使用data-dismiss =“modal”?

2 个解决方案

#1

You can do it with auto modal closing behavior which uses the data-dismiss attribute itself or with the manual modal opening (as i guess you are doing currently) , by subscribing to hide event and use preventDefault on the event.

您可以使用自动模态关闭行为来执行此操作,该行为使用data-dismiss属性本身或使用手动模式打开(我猜您当前正在执行),通过订阅隐藏事件并对事件使用preventDefault。

$('yourmodalselector').on('hide',function(e){
   if(yourConditionNotToCloseMet){
      e.preventDefault();
   }
});

Demo

Demo2

See Documentation

hide event event is fired immediately when the hide instance method has been called, which gets called wither way and this is the best place to prevent the modal from closing.

当调用hide实例方法时,会立即触发hide事件事件,该方法被称为wither方式,这是防止模式关闭的最佳位置。

#2

Make another button like this

像这样制作另一个按钮

<button type="button" class="btn btn-warning btn-lg shiny" data-dismiss="modal" aria-hidden="true">Cancel</button>

This button contains data-dismiss="modal" .You can hide this if you want.

此按钮包含data-dismiss =“modal”。如果需要,您可以隐藏此按钮。

Now You can use any other function in a customized way and when you want to hide the modal you can call

现在您可以以自定义方式使用任何其他功能,并且当您想隐藏可以调用的模态时

$(".btn-warning").click();