ModalPopupExtender 与 CalendarExtender

最新推荐文章于 2024-09-14 18:52:56 发布

weixin_30823001

最新推荐文章于 2024-09-14 18:52:56 发布

阅读量73

点赞数

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/shp_yt/archive/2009/12/09/1620696.html

版权

最近做项目时遇到这个问题，原先使用asp.net2.0 ajax1.0时CalendarExtender在ModalPopupExtender中显示正常，但在更新.net framework3.5，以及ajax3.5后CalendarExtender在ModalPopupExtender中不显示了，后来百度下是被ModalPopupExtender遮挡了（我的ModalPopupExtender有点大）并且在网上找到解决方案。

FireFox下用Firebug查看页面生成的html，你会看到ModelPopupExtender样式中的z-index和CalendarExtender是相同的，这估计是Ajax Toolkit控件中的一个bug，应该所有类似于这样的控件都会存在这个问题，即在层上打开层，后打开的层会被之前的层挡住，因为它们的z-index都是相同的。想要日期输入面板不被后面的“模式对话框”挡住，只能是将它的z-index设得更大点，但是单纯的css修改又没有效果，因为这个日期输入面板是动态生成的，伴随着里面的css，所以你预先设置它的样式是没有用的，除非你修改控件的源代码。

　　后来在网上查到了一个资料，其实CalendarExtender控件有几个客户端事件可以用，其中有一个OnClieckShown，是在日期输入面板打开后触发的，于是我们可以从这里下手，通过脚本来设置z-index的值。下面是代码。

代码

1 < script type = " text/javascript " >
2 // Ensure the calendar panel was shown on the top level.
3 function calendarShown(sender, args) { sender._popupBehavior._element.style.zIndex = 1000005 ; }
4 </ script >

原本ModelPopupExtender的z-index值就已经很高了，这恐怕是控件的设计者担心它会被其它层挡住的原因吧。我们将日期选择面板的z-index值再设高一点，然后在控件中添加OnClientShown="calendarShown"，保存后重新查看页面。