软件下载 | 资讯教程 | 最近更新 | 下载排行 | 一键转帖 | 发布投稿
您的位置:最火下载站 > 网络编程 > ASP教程 > ModalPopupExtender中使用CalendarExtender被层遮挡的解决方法

ModalPopupExtender中使用CalendarExtender被层遮挡的解决方法

  ASP.NET AJAX Control Toolkit是一组非常不错的基于asp.net的ajax控件,它建立在asp.net 3.0的ScriptManager组件之上,提供了很多非常实用的效果和功能。大家可以去官方网站查看demo,ModalPopupExtender控件用来在网页中实现类似于模式对话框的效果,而CalendarExterder控件提供日期输入,它有几个很重要的属性:

  TargetControlID:日期输入的目标控件ID,一般来说都都是一个文本框。

  Format:日期格式,如yyyy-MM-dd。

  PopupButtonID:用户打开日期选择面板的控件ID,如按钮,图片等。

  PopupPosition:设置日期选择面板打开的位置,这个是相对于TargetControlID所在控件的位置的。有几个可选的值:BottomLeft,BottomRight,Left,Right,TopLeft,TopRight。

  一般来说我们只需要设置这几个属性就可以满足应用了,除非你想自定义日期选择面板的显示样式,这时你需要自己给定CssClass。这里是一个例子。

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<asp:TextBox ID="tbBeginTime" runat="server" CssClass="singleText" MaxLength="10" Width="90"></asp:TextBox>
<asp:Image ID="imgBeginTime" ImageUrl="http://www.cnblogs.com/Images/Admin/Calendar_scheduleHS.png" runat="server" />
<ajaxToolkit:CalendarExtender ID="CalendarExtenderBeginTime" Format="yyyy-MM-dd" TargetControlID="tbBeginTime" PopupButtonID="imgBeginTime" runat="server">
</ajaxToolkit:CalendarExtender>

网上有人说这个控件打开的日期选择面板会被下拉列表挡住,好像在早期的版本中会存在这个问题,现在新的版本已经修正了这个bug。我所遇到的问题是在ModelPopupExtender控件中使用CalendarExtender,日期选择面板会被后面的ModelPopupExtender挡住。有关ModelPopupExtender的使用读者可以看看官方网站的例子,很简单,这里我就不多说了。看一下问题的截图

2009-11-24 9-52-45

   看到了吧!CalendarExtender弹出的日期选择面板被后面的ModelPopupExtender挡住了。我在Google上搜了一些资料,大多都是讲怎么重新设置CalendarExtender控件的样式,指定层的z-inde属性等,但我尝试过都失败了,其中有人说在IE6下测试是可以的,不过我没有验证过,因为我现在也找不到装有IE6的机器了,没有环境,自然测不了。

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

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

Copy to ClipboardLiehuo.Net Codes引用的内容:[www.veryhuo.com]
<script type="text/javascript">
// Ensure the calendar panel was shown on the top level.
function calendarShown(sender, args) { sender._popupBehavior._element.style.zIndex = 1000005; }
</script>

相关阅读
栏目导航
推荐软件