完美解决在ModalPopupExtender中使用CalendarExtender时被层遮挡的问题

2020-04-24 22:13:26

字体：大中小

来源：转载

供稿：网友

大家可以去官方网站查看demo，ModalPopupExtender控件用来在网页中实现类似于模式对话框的效果，而CalendarExterder控件提供日期输入，它有几个很重要的属性：

TargetControlID：日期输入的目标控件ID，一般来说都都是一个文本框。
Format：日期格式，如yyyy-MM-dd。
PopupButtonID：用户打开日期选择面板的控件ID，如按钮，图片等。
PopupPosition：设置日期选择面板打开的位置，这个是相对于TargetControlID所在控件的位置的。有几个可选的值：BottomLeft，BottomRight，Left，Right，TopLeft，TopRight。
　　一般来说我们只需要设置这几个属性就可以满足应用了，除非你想自定义日期选择面板的显示样式，这时你需要自己给定CssClass。这里是一个例子。
代码如下:
<asp:TextBox ID="tbBeginTime" runat="server" CssClass="singleText" MaxLength="10" Width="90"></asp:TextBox>
<asp:Image ID="imgBeginTime" ImageUrl="/upload/2009-11/20091124203311125.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，所以你预先设置它的样式是没有用的，除非你修改控件的源代码。

上一篇：asp.net+jquery Gridview的多行拖放，以及跨控件拖放

下一篇：asp.net 图片的读写入库实现代码

学习交流

web用户控件调用.aspx页面里的方法

web用户控件调用.aspx页面里的方法...

热门图片

猜你喜欢的新闻

猜你喜欢的关注