bootstrap模态框modal被遮罩层挡住问题处理

1. 先从modal的配置中移除遮罩层

<!-- 需要在外面的modal需要设置参数data-backgrop为false，这样就不会显示遮罩层了 -->
<div class="modal" id="topMenu-modal" tabindex="-1" role="dialog" data-backdrop="false">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header" id="topMenu-modal-header">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
          <h4 class="modal-title">Modal title</h4>
        </div>
        <div class="modal-body"> <p>One fine body&hellip;</p> </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

2. 按需加入和移除遮罩层

//  监听模态框开启并加入遮罩层
$(document).on("show.bs.modal", "#topMenu-modal", function() {
	$(this).css("overflow-y", "scroll");
	var html = "<div class='modal-backdrop fade in' id='topMenu-modal-backdrop'></div>";
	$("#topMenu-modal").append(html)
});

//  监听模态框关闭并加入遮罩层
$(document).on("hide.bs.modal", "#topMenu-menu", function() {
	$("#topMenu-modal-backdrop").remove();
});

3. 如果还不行就提高modal-dialog层级

#topMenu-modal .modal-dialog{
	/* 遮罩层z-index值1040 */
	z-index:1050;
}