CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Michael Mahony
Michael Mahony

Reputation: 1350

Open hidden div as a "popup" next to the hyperlink clicked

Assume the following simple 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>

Now also assume that there is CSS that styles #exportPopup appropriiately and sets it to display:none initially. This brings me to two questions:

  1. How do I make that hidden DIV (#exportPopup) show up right where the #doExport link is clicked?
  2. How do I use the JQuery datepicker on those two input boxes?

For Question 2 I have already tried this:

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

and it just doesn't work when I click those boxes. I hope someone can enlighten me.

Upvotes: 0

Views: 2050

Answers (1)

Santosh Joshi
Santosh Joshi

Reputation: 3320

I have created a rough model at http://jsfiddle.net/santoshjoshi/32enE/1/

so basically used the jQuery dialog plugin you need to add following code open the dialog box

HTML Code 

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

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

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

also please have a look at jQuery dialog documentation to customize your popup/dialog http://api.jqueryui.com/dialog/

'UPDATE' used following resources

Upvotes: 1

Related Questions