点击Add按钮执行add_device后如何关闭模态框？

看起来你是在用Bootstrap模态框对吧？问题出在你误用了jQuery UI的dialog('close')方法——Bootstrap模态框有自己的一套API，和jQuery UI Dialog不是同一个东西，所以那行代码当然不会生效啦。

想要实现和Close按钮完全一样的关闭效果，你可以试试下面两种方法：

方法一：通过模态框ID直接关闭 #

如果你知道模态框的ID（比如你的模态框容器是<div class="modal" id="deviceModal">...</div>），可以直接调用Bootstrap的modal('hide')方法：

function add_device(event, element) {
  // 这里写你的add_device函数原有逻辑，比如提交表单、处理数据等
  
  // 执行完毕后关闭模态框
  $('#deviceModal').modal('hide');
}

方法二：通过当前按钮查找模态框（更灵活） #

因为你已经把按钮元素通过this传到了函数里，你可以直接从按钮向上查找最近的模态框容器，这样不用硬写ID，适配性更强：

function add_device(event, element) {
  // 你的原有业务逻辑...
  
  // 找到当前按钮所在的模态框并关闭
  $(element).closest('.modal').modal('hide');
}

为什么之前的代码无效？ #

$(this).dialog('close')是jQuery UI Dialog组件的关闭方法，而你用的是Bootstrap模态框，两者属于不同的UI库，API不通用，所以执行后没有任何效果。

另外要确认一下：你已经正确引入了Bootstrap的JavaScript文件（并且Bootstrap依赖的jQuery也已经加载），不然modal方法也无法正常工作哦～

内容的提问来源于stack exchange，提问作者Flama