使用Bootstrap弹窗模态框更新MySQL数据时编辑删除按钮触发异常

优先级最高的排查点 #

• 首先检查编辑/删除对应模态框DOM的z-index属性值，Bootstrap默认模态框的z-index为1050，背景遮罩的z-index为1040，如果你单独给详情模态框设置过更高的z-index，或者编辑/删除模态框的z-index被其他样式覆盖到低于1040，就会出现模态框被遮罩层盖住的情况，你可以给编辑/删除模态框临时加行内样式style="z-index: 1060 !important"验证是否是该问题导致。
• 检查编辑/删除模态框的display属性，虽然数据已经渲染到DOM中，但可能JS逻辑漏了给模态框添加.show类，或者存在全局样式把.modal.show的display属性覆盖为none，可以直接在审查元素中查看模态框根节点的最终样式生效情况。
• 检查模态框内容区域的opacity或者visibility属性，部分自定义模板会给模态框加弹出动画，如果动画逻辑执行异常，会导致内容透明度保持为0，或者可见性设为隐藏，你可以给模态框的.modal-content节点临时加style="opacity:1 !important; visibility: visible !important"验证。
• 检查是否存在模态框ID重复的问题，如果详情、编辑、删除三个模态框存在ID重复的情况，Bootstrap模态框的初始化逻辑会紊乱，导致仅触发遮罩但找不到正确的模态框节点展示内容。
• 如果是通过AJAX动态加载编辑/删除模态框的内容，检查内容是否被插入到了模态框.modal-body节点之外，比如插入到模态框根节点和.modal-dialog节点之间，内容会因为不在标准模态框结构中而无法正常显示。

快速验证方案 #

你可以先在浏览器控制台执行以下代码，强制弹出编辑模态框查看内容是否正常显示，将代码中的#edit-modal替换为你实际使用的编辑模态框ID即可：

$('#edit-modal').modal('show')

如果执行后模态框内容正常显示，说明你绑定的编辑按钮点击事件逻辑存在问题，要么漏了触发模态框显示的步骤，要么存在事件绑定冲突。

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