Question

我有一个包含多个模态的页面，我按唯一ID打开它们，如下所示：

%a{"data-toggle" => "modal", href: "#modal-123", role: "button"}
%a{"data-toggle" => "modal", href: "#modal-456", role: "button"}

这很好用，但问题是关闭一个特定的模态。默认情况下，这是通过以下方式完成的：

.modal.fade{:style => "display: none;", :tabindex => "-1", id: "modal-123"}
  .modal-dialog
    .modal-content
      .modal-header
      .modal-body
      .modal-footer
        %button.btn.btn-default{"data-dismiss" => "modal", :type => "button"} Close

但这不起作用，因为它不知道要关闭哪个模态。如何使用特定ID关闭模态？

Answer 1

您可以在此处调用modal(hide)方法。

$('#myModal').modal('hide')

Answer 2

通过javascript，您可以使用.modal('hide')方法按ID关闭特定模式。像：

$('#modal-456').modal('hide');

Answer 3

我认为您可以使用下面的代码帮助。基本上，点击即可获得特定模态的点击事件会隐藏起来。

$('#your-modal-id').on('click', '[data-dismiss="modal"]', function(e){ e.stopPropagation(); 
});

Answer 4

删除data-dismiss属性。然后添加

$('.btn.btn-default').click(function(){
   $(this).modal('hide');
});

当有更多模态时，按ID隐藏模态

4 个答案: