jQuery UI Datepicker 一个案例(弹出div层，悬浮整个页面)

思念是荒芜的梦

发布于 2026-01-09 13:03:18

680

今天遇见一个需求，要求将jQuery UI Datepicker绑定在div上面，并且弹出的div悬浮在整个页面之上。

<html lang="en">
<head>
  <meta charset="utf-8" />
  <title>jQuery UI Datepicker - Display inline</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
  <link rel="stylesheet" href="/resources/demos/style.css" />
  <script>
   function showIt(event) {
	$("#datepicker").show();

    $("#datepicker").css("left", event.clientX);
    $("#datepicker").css("top", event.clientY + 10);  
    $( "#datepicker" ).datepicker({
	onSelect:function(date){
		alert(date);
		$("#datepicker").hide();
	}
	});
  };
  </script>
</head>
<body>

 <input type="submit" onclick="showIt(event);" id="one" value="1"/>
 <div>在他上面</div>
<div id="datepicker" style="position:absolute;display:none;border:1px solid silver;background:silver;"></div>

<div>在他上面啊啊</div>
 
 
</body>
</html>

希望对大家有帮助。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2026-01-09，如有侵权请联系 cloudcommunity@tencent.com 删除

jquery