jquery 修改 bootstrap模态框的宽度并且居中 - 星河赵

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

1.定义模态框

    <div class="modal fade"  tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog" >
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
                        ×
                    </button>
                    <h4 class="modal-title" >
                        请修改所选单元格的内容
                    </h4>
                </div>

                <div class="modal-body">
                    <div class="row">
                        <div class="col-md-8" >
                            <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  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"   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);
            }
         });