<div class="modal fade" id="myModal3" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-toggle="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="title3">接通确认回柜</h4>
</div>
<div class="modal-body">
<!-- 弹窗内容开始 -->
<style>
.sunmt{height:15px; clear:both}
.sunpt{padding-top:7px}
.shiduan{background:#fafafa; margin:0 0 1em 3.5%; border:solid 1px #DDD; border-radius:0.35em; cursor:pointer; position:relative}
.shiduan h5{margin-bottom:5px; margin-top:7px}
.shiduan p{color:#999; margin-bottom:5px}
.shiduan span{position:absolute; right:12px; top:27px; color:#3e9317; font-size:1.2em}
.shiduan.clicked{background:#ffe1e1; border:solid 1px #ebc8c7}
.shiduan.current{background:#fafafa; border:solid 1px #3e9317}
@media all and (max-width: 767px) {
.shiduan{margin-left:6%}
.sunp .col-sm-9{position:absolute; left:55px; top:0}
}
</style>
<div class="container-fluid bg-white">
<div class="row">
<form class="form-inline">
<div class="col-sm-12 form-group row">
<label class="col-sm-3 control-label text-right sunpt" style="float:left;">预约日期</label>
<div class="col-sm-4"><input class="form-control" id="appointmentYMD" placeholder="年-月-日" type="text" style="width:150px !important;"></div>
</div>
<div class="col-sm-12 form-group row">
<label class="col-sm-3 control-label text-right sunpt" style="float:left;">预约时段</label>
<!-- <div class="col-sm-4" style="padding-top:7px;" id="pmCSS"><input name="after" id = "pm" type="radio" value="下午"/>下午</div> -->
<div class="col-sm-4" style="padding-top:7px; width:90px" id="amCSS"><input name="after" id = "am" type="radio" checked="true" value="上午"/>上午</div>
<div class="col-sm-4" style="padding-top:7px;" id="pmCSS"><input name="after" id = "pm" type="radio" value="下午"/>下午</div>
</div>
<!-- <div class="sunmt hidden-xs"></div> -->
<div class="col-sm-12 form-group row">
<label class="col-sm-3 control-label text-right sunpt" style="float:left;">当天已预约</label>
<div class="col-sm-4" style="margin-top: 7px;">
<span id="num1"></span>
</div>
</div>
<div class="col-sm-12 form-group row">
<label class="col-sm-3 control-label text-right sunpt" style="float:left;">当天可预约</label>
<div class="col-sm-4" style="margin-top: 7px;">
<span id="num2"></span>
</div>
</div>
<div class="sunmt hidden-xs"></div>
<div class="col-sm-12 form-group row sunp" id="undetermined">
<label class="col-sm-3 control-label text-right">待定</label>
<div class="col-sm-9">
<input type="checkbox" id="_checkbox">
</div>
</div>
<div class="sunmt hidden-xs"></div>
<div class="col-sm-12 form-group row">
<label class="col-sm-2 control-label text-right">备注</label>
<div class="col-sm-9"><textarea class="form-control" rows="3" id="note3"></textarea></div>
</div>
<div id="hint3" style="color: red; height: 1px; position: absolute; left: 120px; top: 25em;"></div>
</form>
</div>
</div>
<!-- 弹窗内容结束 -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-rose" id="confirm3">确认</button>
<button type="button" class="btn btn-default" data-dismiss="modal" id="close3">取消</button>
</div>
</div>
</div>
</div>
是用的是bootstrap的modal显示弹窗,但是在弹窗中设置了一个预约日期的input标签,当点击input的时候网页版与其他浏览器都好用,仅仅手机和ipad的Safari浏览器点击时整个modal弹窗顶到了页面的最上方.请问这是什么原因导致的.