Question

在远程模态页面中添加日期时间选择器

参见：http://plnkr.co/edit/cXBhTstasXsl4MXGQsRu?p=preview

＆＃34;首先发布＆＃34;按钮应显示日期时间选择器，但它甚至不会打开该页面，但如果我单独打开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>

Answer 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>

希望，你会得到一些帮助来解决你的问题。 :)：）

远程模态

1 个答案: