Question

我在弹出窗口上遇到问题。我已创建弹出窗口，我想在弹出窗口上显示日历。我尝试了代码，但日历没有显示。请帮助我。检查下面的网址http://test.hybreed.co/sirius/，您将获得弹出窗口选项，而不会显示弹出窗口。

   <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sirius Sport</title>



    <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css"/>
    <script src="//code.jquery.com/jquery-1.10.2.js"></script>
    <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>



    <style>
    #popupBoxThreePosition{
        top: 0; left: 0; position: fixed; width: 100%; height: 120%;
        background-color: rgba(0,0,0,0.7); display: none;
      }
      .popupBoxWrapper{
        width: 70%;height: 100%; margin: 50px auto; text-align: left;
      }
      .popupBoxContent{
        background-color: #FFF; padding: 15px;
      }
    </style>


</head>
<body>

<!--Section2-->
<section>
    <div id="content_1" class="content">


<div class="col-md-6">
<div class="post2">

  <div class="box">


      <div id="wrapper">

      <p><a href="javascript:void(0)" onclick="toggle_visibility('popupBoxThreePosition');"><h4>Popup</h4></a> </p>

    </div>
    </div>
  </div>
  </div>

    </div>
</section>
<!--End Section2-->



<!-- Popup content -->
<div id="popupBoxThreePosition">
      <div class="popupBoxWrapper">
        <div class="popupBoxContent">
            <div class="row">
                <div class="col-xs-6 col-md-4">

      </div>

</div>

  <div id="datepicker"></div><!-- calender-->


          <p><a href="javascript:void(0)" onclick="toggle_visibility('popupBoxThreePosition');"><h5>Close</h5></a></p>

        </div>
      </div>
    </div>

  <!--End Popup-->







<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>


<script src="js/popup.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="js/viewportchecker.js"></script>

<script type="text/javascript">

jQuery(document).ready(function() {
  jQuery('.post').addClass("hidden1").viewportChecker({
      classToAdd: 'visible animated slideInLeft', // Class to add to the elements when they are visible
      offset: 100    
     });   
});     

jQuery(document).ready(function() {
  jQuery('.post2').addClass("hidden1").viewportChecker({
      classToAdd: 'visible animated slideInRight', // Class to add to the elements when they are visible
      offset: 100    
     });   
});     


function toggle_visibility(id) {
             var e = document.getElementById(id);
             if(e.style.display == 'block')
                e.style.display = 'none';
             else
                e.style.display = 'block';
          }



    $( "#datepicker" ).datepicker();


</script>
</body>
</html>

Answer 1

问题：<？/ H3>

您在一个页面中有太多相同的脚本：

<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js">
</script>

此处您有 2 版本的 jquery ui 库。在底部，您可以参考其他一些脚本和库。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script>
<script src="js/popup.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/viewportchecker.js"></script>

在底部你有另一个jQuery lib的引用。

<script>
    $( "#datepicker" ).datepicker();
</script>

你有一个datepicker代码，应该包含在doc ready中，以确保DOM （文档对象模型）准备就绪，你可以用它来操作。

如果您没有将其包装在doc ready块中，那么只要浏览器逐行呈现此脚本，它就会立即执行。

因此，如果告诉您这是什么问题，那么我会说当你在那个时间点运行你的日期选择代码时，dom元素<div id="datepicker"></div>没有准备好/加载到页面中。

这就是我们应该始终将代码包装在.ready()/DOMContentLoaded事件块中的原因或
我们可以将下面的所有脚本放在页面底部，这也确保所有dom节点都可用于javascript。

因此，相同库的不同版本可能存在一些冲突问题。

解决方案：

嗯，你可以在一个页面中使用不同版本的jQuery，但最好使用一个可用的，所以我会使用这些：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
</script><!-- This should be included before jquery ui-->
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js">
</script><!-- This should always be included after jquery lib but before ui widget script usage-->
<script src="js/popup.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/viewportchecker.js"></script>
<script>
    $(document).ready(function(){ // doc ready block.
        $( "#datepicker" ).datepicker(); // <----datepicker code initializer here
        jQuery('.post').addClass("hidden1").viewportChecker({
             classToAdd: 'visible animated slideInLeft', // Class to add to the elements when they are visible
              offset: 100    
         });   

         jQuery('.post2').addClass("hidden1").viewportChecker({
             classToAdd: 'visible animated slideInRight', // Class to add to the elements when they are visible
             offset: 100    
         });   
    });     


     function toggle_visibility(id) {
         var e = document.getElementById(id);
         if(e.style.display == 'block')
            e.style.display = 'none';
         else
            e.style.display = 'block';
      }
</script>

Answer 2

使用此代码认为它可以帮助..

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Sport</title>

<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/animate.css" />
<link rel="stylesheet" type="text/css" href="css/demo.css" />
<link rel="stylesheet" href="css/style.css" media="screen" />
<link href="css/bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />


    <style>
    #popupBoxThreePosition{
        top: 0; left: 0; position: fixed; width: 100%; height: 120%;
        background-color: rgba(0,0,0,0.7); display: none;
      }
      .popupBoxWrapper{
        width: 70%;height: 100%; margin: 50px auto; text-align: left;
      }
      .popupBoxContent{
        background-color: #FFF; padding: 15px;
      }
    </style>

</head>
<body>

<!--Section2-->
<section>
    <div id="content_1" class="content">

  <h2> Sport</h2>
      <p>Subheading Subheading Subheading</p>

      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</p>

<div class="col-md-6">
<div class="post">
  <div class="box " >

      <img src="Images/section1.jpg" alt="" style="height:300px;width:400px; ">
      <h4>Learn to sail Camps & Events at H20</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

<div id="wrapper">

      <p>
        <a href="javascript:void(0)" onclick="toggle_visibility('popupBoxThreePosition');">
          <h4>Popup</h4>
        </a> 
      </p>

    </div>

    </div>  </div>
  </div>

<div class="col-md-6">
<div class="post2">

  <div class="box">
      <img src="Images/section2.jpg" alt="" style="height:300px;width:400px;">
      <h4> My First Sailing Experience</h4>
      <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>

      <div id="wrapper">

      <p><a href="javascript:void(0)" onclick="toggle_visibility('popupBoxThreePosition');"><h4>Popup</h4></a> </p>

    </div>
    </div>
  </div>
  </div>

    </div>
</section>
<!--End Section2-->



<!-- Popup content -->
<div id="popupBoxThreePosition">
      <div class="popupBoxWrapper">
        <div class="popupBoxContent">
            <div class="row">
                <div class="col-xs-6 col-md-4">
                  <h3>MURUD JANJIRA</h3>
                 <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. <br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. </br>Lorem Ipsum has been the industry's standard dummy text ever since the 1500s.Lorem Ipsum is simply dummy text of the printing and typesetting industry. </br>Lorem Ipsum has been the industry's standard dummy text </p>
                </div>

            </div>

           <input class="datepicker" data-date-format="mm/dd/yyyy" />


            <p><a href="javascript:void(0)" onclick="toggle_visibility('popupBoxThreePosition');"><h5>Close</h5></a></p>

    </div>
  </div>
</div>

  <!--End Popup-->







<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>


<script src="js/popup.js"></script>

<script src="js/bootstrap.min.js"></script>

<script src="js/viewportchecker.js"></script>

<script type="text/javascript">

 $('.datepicker').datepicker({
    format: 'mm/dd/yyyy',
    startDate: '-3d'
})

jQuery(document).ready(function() {
  jQuery('.post').addClass("hidden1").viewportChecker({
      classToAdd: 'visible animated slideInLeft', // Class to add to the elements when they are visible
      offset: 100    
     });   
});     

jQuery(document).ready(function() {
  jQuery('.post2').addClass("hidden1").viewportChecker({
      classToAdd: 'visible animated slideInRight', // Class to add to the elements when they are visible
      offset: 100    
     });   
});     


function toggle_visibility(id) {
   var e = document.getElementById(id);
   if(e.style.display == 'block')
      e.style.display = 'none';
   else
      e.style.display = 'block';
}



</script>
</body>
</html>

您首先加载jquery，因此它没有获得正确的jquery .. 我希望这个解决方案能解决你的问题..

如何在弹出窗口中显示日历

2 个答案:

解决方案：