bootstrap模态框里面加了按钮，但对按钮添加点击事件总是失败_bootstrap form 表单的其他按钮点击不了-CSDN博客

本文详细解析了一个常见的前端开发问题：模态框中的按钮点击事件无法触发，以及如何通过调整CSS属性pointer-events来解决这一问题，确保模态框内的元素可以正常交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在.modal-footer的div里边放置了两个<button>的按钮，但是在给其添加按钮的点击事件的时候总是失败（事件不被执行）。然后尝试获取 .modal-body的div里的内容也是失败。

			<div id="modal-table" class="modal fade" tabindex="-1">
								<div class="modal-dialog" style="height: 400px; overflow: auto;">
									<div class="modal-content">
										<form>
											<div class="modal-body">
												<div class="form-group">
													<label>地址:</label> <input type="text" name="roleName"
														class="form-control">
												</div>
												<div class="form-group">
													<label>文件名:</label> <input type="text" name="roleDesc"
														class="form-control">
												</div>
											</div>
										</form>
										<div class="modal-footer">
											<button class="btn" data-dismiss="modal"
												style="background: #ccc">取消</button>
											<button class="btn" data-dismiss="modal"
												style="background: #ccc" id="save">保存</button>
										</div>
									</div>
								</div>
							</div>

在.modal-dialog中有一项css属性为pointer-events: none的结果，导致在模态框上有一层类似于覆盖物，鼠标不能获取到模态框中的内容（根本点击不到模态框中的按钮）

修改如下即可

<div class="modal-dialog" style="height: 400px; overflow: auto; pointer-events：auto">