模态框无法关闭，点击关闭按钮报未定义错误，求帮忙排查问题

问题原因 #

1. 关闭按钮绑定的close_dilog方法未定义，点击时自然抛出未定义错误
2. 所有电话跳转链接没有关联模态框关闭逻辑，点击后模态框不会自动隐藏
3. 若使用Bootstrap原生的data-dismiss="modal"属性，需确保页面已正确引入jQuery和Bootstrap JS依赖，否则该属性不生效

修复方案 #

1. 引入必要依赖 #

在页面</body>标签前添加Bootstrap模态框所需的基础依赖：

<script src="https://cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@3.4.1/dist/js/bootstrap.min.js"></script>

2. 修复关闭按钮逻辑 #

两种方案二选一即可：

• 方案一：直接用Bootstrap原生能力，删除关闭按钮上的onclick="close_dilog(this.id)"属性，保留data-dismiss="modal"即可生效
• 方案二：保留原有onclick绑定，手动定义close_dilog方法：

function close_dilog() {
  $('#myModal').modal('hide');
}

3. 修复点击链接不关闭模态框问题 #

给所有<a href="tel:+1 (000) 000-0000">标签添加类名call-link，再添加如下JS：

$('.call-link').on('click', function() {
  $('#myModal').modal('hide');
})

可选优化 #

建议删除模态框标签上写死的style="display:block"，改用JS主动触发显示，避免样式冲突：

// 页面加载完成后显示模态框
$(function() {
  $('#myModal').modal('show');
})

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