Bootstrap 模态框中加入的按钮不能实现点击事件？获取不到模态框中的内容？

Bootstrap 模态框中加入的按钮不能实现点击事件？获取不到模态框中的内容？

问题描述：

小编在使用Bootstrap的过程中，遇到了一个百思不得其解的问题。在.modal-footer的div里边放置了
两个<button>的按钮，但是在给其添加按钮的点击事件的时候总是失败（事件不被执行）。然后尝试获取
.modal-body的div里的内容也是失败。

原因：

<div class="modal fade" id="add-demon-modal" aria-hidden="true" data-backdrop="static">
	<div class="modal-dialog" >
		<div class="model-content" id="add-demon-modal-content">
		</div>
	</div>
</div>

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

pointer-events: none； 可以让某个元素实现类似于海市蜃楼的效果，具体理解为，你可以看的到某个元素，但是你无法摸的着。所以模态框中的按钮添加的事件本身没问题，只是点击不到而已。

解决办法

	重写.modal-dialog的css样式为pointer-events：auto;这样就可以获取到模态框的内
容了，按钮的点击事件也可以生效。 如果对pointer-events有其他要求，可以按照下面
的用法将其改为具体的值就可以了。

ps：记得将自己引入的css文件放置在Bootstrap的css文件之后

pointer-events的用法

	pointer-events CSS 属性指定在什么情况下 (如果有) 某个特定的图形元素可以成为
鼠标事件的 target。

能够：

• 阻止用户的点击动作产生任何效果
• 阻止缺省鼠标指针的显示
• 阻止CSS里的 hover 和 active 状态的变化触发事件
• 阻止JavaScript点击动作触发的事件

语法：

pointer-events属性被指定为从下面的值列表中选择的一个关键字。

1.auto
与pointer-events属性未指定时的表现效果相同，对于SVG内容，该值与visiblePainted效果相同
2.none
元素永远不会成为鼠标事件的target。但是，当其后代元素的pointer-events属性指定其他值时，鼠标事件可以指向后代元素，在这种情况下，鼠标事件将在捕获或冒泡阶段触发父元素的事件侦听器
3.visiblePainted
只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：

• visibility属性值为visible，且鼠标指针在元素内部，且fill属性指定了none之外的值
• visibility属性值为visible，鼠标指针在元素边界上，且stroke属性指定了none之外的值

4.visibleFill
只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素内部时,元素才会成为鼠标事件的目标，fill属性的值不影响事件处理
5.visibleStroke
只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素边界时,元素才会成为鼠标事件的目标，stroke属性的值不影响事件处理
6.visible
只适用于SVG。只有在元素visibility属性值为visible，且鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，fill和stroke属性的值不影响事件处理。
7.painted
只适用于SVG。元素只有在以下情况才会成为鼠标事件的目标：

• 鼠标指针在元素内部，且fill属性指定了none之外的值
• 鼠标指针在元素边界上，且stroke属性指定了none之外的值

visibility属性的值不影响事件处理。
8.fill
只适用于SVG。只有鼠标指针在元素内部时,元素才会成为鼠标事件的目标，fill和visibility属性的值不影响事件处理
9.stroke
只适用于SVG。只有鼠标指针在元素边界上时,元素才会成为鼠标事件的目标，stroke和visibility属性的值不影响事件处理
10.all
只适用于SVG。只有鼠标指针在元素内部或边界时,元素才会成为鼠标事件的目标，fill、stroke和visibility属性的值不影响事件处理