在远程模态页面中添加日期时间选择器
参见:http://plnkr.co/edit/cXBhTstasXsl4MXGQsRu?p=preview
"首先发布"按钮应显示日期时间选择器,但它甚至不会打开该页面,但如果我单独打开first.html页面,它将打开日期时间选择器没有问题。
的index.html
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Modal Multiple Remote</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>
<body>
<a href="first.html" data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch First</a>
<a href="second.html" data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch Second</a>
<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
<script>
$('#myModal').on('hidden', function () {
$(this).removeData('modal');
});
</script>
</body>
</html>
first.html
<script type="text/javascript" src="//code.jquery.com/jquery-2.2.3.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script type='text/javascript'>//<![CDATA[
window.onload=function(){
$(function () {
$('#datetimepicker1').datetimepicker();
$('#datetimepicker2').datetimepicker({
useCurrent: false //Important! See issue #1075
});
$("#datetimepicker1").on("dp.change", function (e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function (e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});
});
}//]]>
</script>
<div class="container">
<div class="row">
<div class='col-sm-6'>
<div class="form-group">
<div class='input-group date' id='datetimepicker1'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
<div class='input-group date' id='datetimepicker2'>
<input type='text' class="form-control" />
<span class="input-group-addon">
<span class="glyphicon glyphicon-calendar"></span>
</span>
</div>
</div>
</div>
</div>
</div>
答案 0 :(得分:1)
我刚刚通过更新代码解决了模态消失的问题。
由于引导版本冲突,你的模态正在消失。 只需从first.html
中删除以下行 <link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
*
first.html(下面)的剩余部分包含与日历弹出位置相关的更新以及模态体高度w.r.t弹出窗口的调整。
first.html文件
<script type='text/javascript'>
//<![CDATA[
$(function() {
let elem = '.modal-body';
let icon = {
icons: {
time: "fa fa-clock-o",
date: "fa fa-calendar",
up: "fa fa-chevron-up",
down: "fa fa-chevron-down"
}
};
$('#datetimepicker1, #datetimepicker2').on('dp.show', function() {
let height = $(elem).get(0).scrollHeight;
$(elem).css('height', height); // adjust modal-body height on calendar pop-up
});
$('#datetimepicker1, #datetimepicker2').on('dp.hide', function() {
$(elem).css('height', '85');
});
$('#datetimepicker1').datetimepicker(icon);
$('#datetimepicker2').datetimepicker(icon);
$('#datetimepicker2').datetimepicker({
useCurrent: false //Important! See issue #1075
});
$("#datetimepicker1").on("dp.change", function(e) {
$('#datetimepicker2').data("DateTimePicker").minDate(e.date);
});
$("#datetimepicker2").on("dp.change", function(e) {
$('#datetimepicker1').data("DateTimePicker").maxDate(e.date);
});
});
//]]>
</script>
<div class='container'>
<div class="col-sm-6">
<div class="form-group">
<div class='input-group date' style="position: relative">
<input type='text' class="form-control" id='datetimepicker1' />
</div>
</div>
<div class="form-group">
<div class='input-group date' id='datetimepicker' style="position: relative">
<input type='text' class="form-control" id='datetimepicker2' />
</div>
</div>
</div>
</div>
index.html文件
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="utf-8">
<title>Modal Multiple Remote</title>
<link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap-combined.min.css" type='text/css' rel="stylesheet">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/css/bootstrap-datetimepicker.min.css">
</head>
<body>
<a href="first.html" data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch First</a>
<a href="second.html" data-target="#myModal" role="button" class="btn" data-toggle="modal">Launch Second</a>
<div class="modal fade hide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" >
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">Modal header</h3>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer" id="modal-footer-hide" style="z-index: -50">
<button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>
<button class="btn btn-primary">Save changes</button>
</div>
</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.13.0/moment.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datetimepicker/4.17.37/js/bootstrap-datetimepicker.min.js"></script>
<script src="app.js"></script>
</body>
</html>
希望,你会得到一些帮助来解决你的问题。 :):)