0

我成功地在单击文本框时调出日期选择器

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>
$(function() { 
$("#datepicker1").datepicker({  maxDate: new Date, minDate: new Date(2007, 6, 12),dateFormat: 'yy-mm-dd' });
});

我也成功地在加载页面时弹出了弹出窗口，这是代码

 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

<script type="text/javascript">
$(document).ready(function() {  

    var id = '#dialog';

    //Get the screen height and width
    var maskHeight = $(document).height();
    var maskWidth = $(window).width();

    //Set heigth and width to mask to fill up the whole screen
    $('#mask').css({'width':maskWidth,'height':maskHeight});

    //transition effect     
    $('#mask').fadeIn(1000);    
    $('#mask').fadeTo("slow",0.8);  

    //Get the window height and width
    var winH = $(window).height();
    var winW = $(window).width();

    //Set the popup window to center
    $(id).css('top',  winH/2-$(id).height()/2);
    $(id).css('left', winW/2-$(id).width()/2);

    //transition effect
    $(id).fadeIn(2000);     

//if close button is clicked
$('.window .close').click(function (e) {
    //Cancel the link behavior
    e.preventDefault();

    $('#mask').hide();
    $('.window').hide();
});     

//if mask is clicked
$('#mask').click(function () {
    $(this).hide();
    $('.window').hide();
});     

});

 </script>

<style type="text/css">
body {
font-family:verdana;
font-size:15px;
}

a {color:#333; text-decoration:none}
a:hover {color:#ccc; text-decoration:none}

#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}  
#boxes .window {
position:absolute;
left:0;
top:0;
width:440px;
height:200px;
display:none;
z-index:9999;
padding:20px;
}
#boxes #dialog {
width:375px; 
height:203px;
padding:10px;
background-color:#ffffff;
}
</style>
</head><body>
 <h2><a href="http://www.queness.com/">Simple jQuery Modal Window Examples from Queness WebBlog</a></h2>
  <div style="font-size: 10px; color: rgb(204, 204, 204);">Except where otherwise noted, content on this site is licensed under a Creative Commons Attribution 3.0 License.</div>

 <div id="boxes">
 <div style="top: 199.5px; left: 551.5px; display: none;" id="dialog" class="window">
 Simple Modal Window | 
 <a href="#" class="close">Close it</a>
 </div>
 <!-- Mask to cover the whole screen -->
  <div style="width: 1478px; height: 602px; display: none; opacity: 0.8;" id="mask">     
  </div>
  </div>
  </body>
  </html>

现在我想在同一页面中同时使用日期选择器和弹出窗口，但是当我将它集成到同一页面时，我发现弹出窗口运行良好，因为日期选择器没有出现。当我删除了弹出窗口的代码时日期选择器正在启动，我完全对我的代码发生了什么感到困惑，请有人帮助我

4

1 回答 1

0

您不想两次引用 jQuery。由于您已经在日期选择器中拥有它，因此您无需将其添加到对话框中。

拿着吧，

<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.1/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.1/jquery-ui.js"></script>

并删除此行，

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.js"></script>

这是工作代码，

http://jsfiddle.net/8vNP7/

于 2013-06-21T08:58:41.200 回答