bootstrap模态对话框大小控制与显示位置控制

需求：要求

1.弹出的bootstrap的modal对话框没有遮罩层(去掉默认的遮罩层)

2.大小为宽200px,高200px

3.显示位置在触发元素的位置（随着触发元素位置的不同而不同）

整体效果如下：

首先模态框的html代码是没有变化的：

<!-- 个人中心模态框 -->
<div class="modal"  tabindex="-1" id="personalModal">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-body aligncenter">
      	  <span>
	          <img src="anti/imgs/user.svg">
      	  </span>
      	  <span>
      	  	admin
      	  </span>
     </div>
     <div class="modal-footer">
         <span>修改密码</span><span>&gt;</span>
      </div>
   </div><!-- /.modal-content -->
 </div><!-- /.modal-dialog -->
</div><!-- /.modal -->	

为了实现定制的大小，需要重写一下modal-sm这个类的宽高属性，当然你也可以自己新加个css类，并把它加在modal-dialog这个css类后边。

.modal-sm{
		width:200px;
		height:200px;
	}

其他布局的css：

.aligncenter{
		text-align: center;
	}
	.aligncenter span:first-child{
		display: block;
		margin-bottom: 5px;
	}
	#personalModal .modal-footer span:first-child{
		float: left;
		margin-left:20px;
	}
	#personalModal .modal-footer span:last-child{
		float: right;
		margin-right: 20px;
	}

怎么让modal对话框在点击元素附近显示呢，这里需要用到JavaScript里面的事件对象的pageX与pageY属性以及bootstrap模态对话框的事件。

//下拉图标的点击事件
$(".dropdown").click(function(evt){
		var src=$(this).find("img").prop("src");
		if(src.indexOf("up")>-1){
			$(this).find("img").prop("src","anti/imgs/down.png");
		}else{
			$(this).find("img").prop("src","anti/imgs/up.png");
			//绑定modal的show.bs.modal事件，修改modal的位置
			$('#personalModal').on('show.bs.modal', function (e) {
				//设置#personalModal的位置
				 $(this).css({
					position:'absolute',
					top:evt.pageY+'px',
					left:evt.pageX-$(".modal-sm").width()+"px"
				 });
			});
			$('#personalModal').on('shown.bs.modal', function (e) {
				 //去掉遮罩层
				$("html").find("div.modal-backdrop").remove();
			});
			$("#personalModal").modal("show");
		}
	});

上面的js代码实现了去掉默认的遮罩层的功能以及修改bootstrap模态框modal显示位置的功能。