Я использую bootstrap DatePicker в Iframe, который открывается в bootstrap модально.
Ниже приведена страница, которая открывает модальное всплывающее окно с iframe:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<a data-toggle="modal" data-target="#myModal" class="btn btn-default">Open</a>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 id="myModalTitle" class="modal-title"></h4>
</div>
<div class="modal-body">
<iframe src="Webform2.aspx" frameborder="0" width="100%"></iframe>
</div>
</div>
</div>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
</body>
</html>
и вот страница выбора даты, которая открывается в ifame:
$(document).ready(function () {
$('.date-picker').datepicker({
keyboardNavigation: false,
forceParse: false,
calendarWeeks: false,
autoclose: true,
clearBtn: true,
disableTouchKeyboard: true
});
});
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/css/bootstrap-datepicker3.min.css" />
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="txtDate" runat="server" CssClass="date-picker"></asp:TextBox>
</div>
</form>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.9.0/js/bootstrap-datepicker.min.js"></script>
</body>
</html>
Теперь, когда открывается всплывающая страница, и мы открываем средство выбора даты в текстовом поле, оно добавляет полосу прокрутки в iframe. Текстовое поле с моей датой находится внизу всплывающей страницы, и я не хочу увеличивать высоту Iframe. Есть ли способ, которым мы можем избежать полосы прокрутки и указатель даты отображается за пределами всплывающего окна.
Спасибо.