Is it possible to fix the position of modal-popup window in center when bootstrap modal is open in ipad browsers? I am using Bootstrap v3.0.0

Question

I am facing a issue with the bootstrap modal pop-up window.The issue is when it opens and when i scroll the background the modal pop-up also changing its position.Now I need to show like the the modal pop-up position in center of the screen fixed to it even if i scroll the background the pop-up should not change its position in web browsers and also in mobile and ipad browsers.

I tired with this the css below :

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

but still the pop-up is scrolling with the background.

please help me out with this.

Many thanks in advance...

Here is the code for the modal pop-up window 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>

not similar but tried this? => http://stackoverflow.com/questions/18053408/vertically-centering-bootstrap-modal-window — NoobEditor, Jul 08 '15 at 07:31

Ronald Zwiers · Answer 1 · 2015-07-08T07:35:19.660

2

Could you give us some more html info? For centering objects:

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

This must be applied inside a relative parent. So what you could try is adding:

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

edited Jul 08 '15 at 07:35

answered Jul 08 '15 at 07:26

Ronald Zwiers

780
2
10
25

I tried with that but still the issue is exisiting like when modal popup is opened and when I am started scrolling the pop-up also started scrolling. – Bhairav Jul 09 '15 at 13:39
Can you create demo fiddle so that it would be easy to me to work around. – Bhairav Jul 09 '15 at 13:39

score 1 · Answer 2 · answered Jul 08 '15 at 07:01

1

try to set body {overflow:hidden} when you open the modal.

answered Jul 08 '15 at 07:01

Richa

4,240
5
33
50

Many thanks for the response Era,but still the issue is exists i tired with it and when i scroll the background the pop-up also started scrolling. – Bhairav Jul 08 '15 at 07:17
`overflow:hidden` anyway is hiding the mess, not cleaning it!! :) hello bff!! – NoobEditor Jul 08 '15 at 07:28
are you sure this property is there at the time of opening modal ? hey bff :) – Richa Jul 08 '15 at 07:28
@Bhairav : other way round is disable scrolling when modal is open because background anyway won't serve any purpose if modal is open => https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=disable%20scrolling%20modal%20window – NoobEditor Jul 08 '15 at 07:34
Lol.. that's what i was trying to do with overflow:hidden .. wassup bff :) – Richa Jul 08 '15 at 07:37

Is it possible to fix the position of modal-popup window in center when bootstrap modal is open in ipad browsers? I am using Bootstrap v3.0.0

2 Answers2