jquery 修改 bootstrap模态框的宽度并且居中

时间:2023-03-09 16:18:37
jquery 修改 bootstrap模态框的宽度并且居中

1.定义模态框

    <div class="modal fade" id="Project_Cell_Modal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog" style="width:1400px;">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">
&times;
</button>
<h4 class="modal-title" id="myModal_Cel_Label">
请修改所选单元格的内容
</h4>
</div> <div class="modal-body">
<div class="row">
<div class="col-md-8" style="margin:0 80px;">
<div class="input-group input-group-sm"> <span class="input-group-addon">修改内容</span>
<input id = "value_text1" type="text">
</div>
<div class="input-group input-group-sm">
<span style="background: #f2dedf;display: none;" id = "cell_error" class="input-group-addon">填写内容不能为空</span>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">关闭
</button>
<button type="button" id="submit_cell" class="btn btn-primary">
修改
</button>
</div> </div><!-- /.modal-content -->
</div><!-- /.modal -->
</div>

2.js设置居中

        $('#myModal').modal('show').css({
width:'auto',
'margin-left':function(){
return-($(this).width()/2);
}
});