javascript - 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 -
i facing issue bootstrap modal pop-up window.the issue when opens , when scroll background modal pop-up changing position.now need show the modal pop-up position in center of screen fixed if scroll background pop-up should not change position in web browsers , in mobile , ipad browsers.
i tired css below :
display: block; position: fixed; margin-top: 50px; but still pop-up scrolling background.
please me out this.
many in advance...
here code 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 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"> {{__ "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>
try set body {overflow:hidden} when open modal.
Comments
Post a Comment