Question

我的模态在极右下方打开，因此应该可见的所有数据都被隐藏;屏幕上只显示模态的一部分如何将其位置从右下角更改为中心？

以下是我的模态的代码：

<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" 
   aria-labelledby="myModalLabel" aria-hidden="true" ng-controller="ModalCtrl">
    <div class="modal-dialog" style="text-align:center" style="align:center">
        <div class="modal-content" style="align:center">
            <div class="modal-header" >
            <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
            &times;
            </button>
            <h4 class="modal-title" id="myModalLabel">
            Details
            </h4>
            </div>
            <div class="modal-body" style="align:center">
                Add some text here
                <div class="form-group" style="align:center">
                <label for="name" class="col-sm-2 control-label">Index</label>
                    <div class="col-sm-10">
                    ==={{data|json}}===
                    <br><input type="text" value="Index" class="form-control" id="s_field"  ng-required="true" readonly="readonly" />
                    <input type="text" value="{{data.index}}" ng-model="data.index" class="form-control" id="index"  ng-required="true" readonly="readonly" />
                    <br><input type="text" value="Severity"  class="form-control"  ng-required="true" readonly="readonly" />
                    <input type="text" value="{{data.S}}" ng-model="data.S" class="form-control" id="S_field"  ng-required="true" readonly="readonly" />
                    <br><input type="text" value="Service Affecting" class="form-control" ng-required="true" readonly="readonly" />
                    <input type="text" value="{{data.SA}}" ng-model="data.SA" class="form-control" id="SA_field"  ng-required="true" readonly="readonly" />     
                    <br><input type="text" value="Acknowledge Time" class="form-control" ng-required="true" readonly="readonly" />
                    <input type="text" value="{{data.AckT}}" ng-model="data.AckT" class="form-control" id="AckT_field"  ng-required="true" readonly="readonly" />
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal -->
</div>

Answer 1

我的猜测是你没有正确使用它。你有没有覆盖Bootstrap CSS？

如何更改Bootstrap模态的位置

1 个答案: