javascript - 在 ipad 浏览器中打开 bootstrap modal 时，是否可以将 modal-popup 窗口的位置固定在中心？我正在使用 Bootstrap v3.0.0

Question

我面临 Bootstrap 模式弹出窗口的问题。问题是当它打开时，当我滚动背景时，模式弹出窗口也改变了它的位置。现在我需要像模式弹出窗口一样显示-即使我滚动背景，弹出窗口也不会改变其在网络浏览器以及移动设备和 iPad 浏览器中的位置。

我厌倦了下面的 css:

display: block;
  position: fixed;
  margin-top: 50px;

但弹出窗口仍然随背景滚动。

请帮我解决这个问题。

提前致谢...

模态弹出窗口html代码如下:

<div aria-hidden="false" style="display:block; position:fixed;margin-top:50px;" class="modal animated fadeInUp" id="modal">
     <form name="adminCheckInOutform" id="admincheckInOutForm">
    <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" id="closeIcon" class="close" data-dismiss="modal"><i class="icon-remove"></i></button>
                        <h4 class="modal-title" id="AdminCheckioTitle">{{__ "Admin_CheckInOut" "Admin CheckIn/Out"}} <b><label id="memName"></label></b>
                        <a href="#" id='helpGuideLink' data-code='101'><span data-code='101'
                class="text-right pull-right"><i class="icon-question-sign" data-code='101'></i></span></a>
                        </h4>
                </div>
                <div class="padder block">
                    <div id="windowNotification"></div>
                    {{#if data}}
                    <div>
                        <label class="control-label">Reason Code:</label>
                        <select class="form-control input-text-50 parsley-validated required"
                            id="reasonCodes"
                            data-required-message="Reason code is required."
                            data-required="true">
                            <!-- <option value="" description="">Select</option> -->
                            {{#each data}} {{#if reasonId}}
                            <option value="0" reasonId="{{reasonId}}"
 description="{{reasonCodeDesc}}">{{reasonCode}}</option>
                            {{/if}} {{/each}}
                        </select>
                    </div>
                    <div class="row block clearfix">
                        <div class="col-sm-7 m-t-small" id="AdminCheckInOutTimePopup">
                            <label class="control-label">{{__ "CheckIn_Or_Out_Time" "Check-In / Out Time"}}</label><br/>
                            <input id="checkInOutTime" class="combodate form-control input-text-50" data-format="hh:mm a" data-template="hh : mm a" name="checkInOutTime" type="text">
                        </div>
                        <div class="col-sm-5 m-t-x-md">
                            <label class="col-sm-10 control-label">
                            <input type="checkbox" name="reasonCodeData.sendEmail" checked="checked" id="sendEmail" value="true" class="input-chk"> &nbsp;&nbsp;
                            {{__ "Send_Email" "Send Emails"}}</label>
                        </div>
                    </div>
                    <input type="hidden" name="reasonCodeData.reasonId" value="" id="reasonId">
                    <div>
                        <textarea id="reasonDesc" readonly
                            class="bg-focus form-control" rows="2" placeholder="Reason Short Description" ></textarea>
                    </div>
                    <div>
                        <label class="control-label">Notes</label>
                        <textarea name="reasonCodeData.notes"
                            class="form-control input-text-50 parsley-validated" rows="2"
                            placeholder="Notes"></textarea>
                    </div>
                    {{else}}
                       <h4>{{error}}</h4>
                    {{/if}}
                </div>
                <div class="modal-footer text-center">
                {{#if data}}
                    <button id="checkInOutBtn" name="checkOutBtn" class="btn btn-md btn-primary m-r-small" type="button">Save</button>
                    {{/if}}
                    <button data-dismiss="modal" id="cancelBtn" class="btn btn-md-default btn-default" type="button">Cancel</button>

                </div>
            </div>
        </div>
    </form>
</div>

Answer 1

你能给我们更多的 html 信息吗？对于居中对象:

  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  margin:auto;
  width:100px;
  height:100px;

这必须在相对父级中应用。所以你可以尝试添加:

top:0;
left:0;
right:0;
botttom:0;
overflow:hidden;