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

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

<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">×span>button>
          <h4 class="modal-title">Modal titleh4>
        div>
        <div class="modal-body"> <p>One fine body…p> div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Closebutton>
        div>
      div>
    div>
div>

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

//  监听模态框开启并加入遮罩层
$(document).on("show.bs.modal", "#topMenu-modal", function() {
	$(this).css("overflow-y", "scroll");
	var html = "
";
	$("#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;
}