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

最新推荐文章于 2022-01-27 10:26:44 发布

思念是荒芜的梦

最新推荐文章于 2022-01-27 10:26:44 发布

阅读量2.4k

点赞数

分类专栏： jquery

本文链接：https://blog.csdn.net/g631521612/article/details/8891583

版权

jquery 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

今天遇见一个需求，要求将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" οnclick="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>

希望对大家有帮助。

思念是荒芜的梦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery UI Datepicker 一个案例(弹出div层，悬浮整个页面)

今天遇见一个需求，要求将jQuery UI Datepicker绑定在div上面，并且弹出的div悬浮在整个页面之上。 jQuery UI Datepicker - Display inline function showIt(event) { $("#datepicker").show(); $("#datepicker"
复制链接

扫一扫