bootstrap的modal模态对话框

bootstrap中的模态对话框在交互式网页中最常使用，而使用最多的场景就是点击一个按钮或者超链接之后弹出这个模态对话框，下面是实现代码，模态框的html代码：

<!-- 提示模态框 -->
<div class="modal fade" data-backdrop="static" data-keyboard="false" tabindex="-1" id="tipModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" ><span>&times;</span></button>
        <h4 class="modal-title">请选择需要更换的公司</h4>
      </div>
      <div class="modal-body">
        <p id="tip">xxxx</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

写了上边的html代码之后，模态框并不会被显示出来，比如现在需要实现点击下面的文字弹出模态框怎么实现呢？

这时候需要调用一下bootstrap模态框的方法就行了，

$(".changetxt").click(function(){
		$('#tipModal').modal("show");
	});

效果如图：

代码解释：

模态框定义时使用的fade类表示modal显示或者隐藏的时候有淡入淡出效果

data-backdrop="static"：表示点击页面上除了模态框之外的其他部分的时候，模态框不关闭

data-keyboard="false"：为false时表示通过键盘上的esc键不能关闭模态框

tabindex="-1"：表示可以通过tab键切换获取焦点的元素