Question

假设以下简单的HTML：

<html>
<head><title>Test</title>
<script src="js/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.10.3.custom.min.js" type="text/javascript"></script>
<link href="css/jquery-ui-1.10.3.custom.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<href="#" id="doExport">Export Now</a>
<div id="exportPopup">
<p>From: <input type="text" id="dateFrom" /></p>
<p>To: <input type="text" id="dateTo" /></p>
</div>
</body>
</html>

现在还假设有一些CSS可以适当地设置样式#exportPopup并将其设置为display：none。这让我有两个问题：

如何让隐藏的DIV（#exportPopup）显示在点击#doExport链接的位置？
如何在这两个输入框上使用JQuery datepicker？

对于问题2，我已经尝试过这个：

$(document).ready(function (e) {
  $("#dateFrom").datepicker();
  $("#dateTo").datepicker();    
});

当我点击这些框时它就不起作用了。我希望有人能够启发我。

Answer 1

我在http://jsfiddle.net/santoshjoshi/32enE/1/

创建了一个粗略的模型

所以基本上使用了jQuery dialog plugin你需要添加以下代码打开对话框

HTML代码

<a href="#" id="doExport">Export Now</a>
<div id="exportPopup" style='display:none'>
   <p>From: <input type="text" id="dateFrom" /></p>
   <p>To: <input type="text" id="dateTo" /></p>
</div>

JavaScript代码

 $(document).ready(function (e) {
    $("#dateFrom").datepicker();
    $("#dateTo").datepicker();   
 });

$( "#doExport" ).click(function() {
   $( "#exportPopup" ).dialog( );
});

另请参阅jQuery对话框文档以自定义弹出/对话框 http://api.jqueryui.com/dialog/

<强> '更新' 使用以下资源

打开隐藏的div作为单击的超链接旁边的“弹出窗口”

1 个答案: