鼠标移开时关闭AJAX Control Toolkit BallonPopupExtender

本文介绍了鼠标移开时关闭AJAX Control Toolkit BallonPopupExtender的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

有人知道如何从客户端关闭Ballon Popup Extender吗？ 一切都很好，但是因为我设置了BPE来显示鼠标悬停，所以我尝试鼠标输出时没有任何关闭或隐藏方法是非常不合理的：

Does someone know how to close Ballon Popup Extender from client side? Everything is fine but since I set up BPE to display on mouse hover it is really impratical that it don't have any close or hide method on mouse out I tried:

function hideElement() { document.getElementById(ID).style.display = 'none'; } function hideControl() { document.getElementById('<%=ID.ClientID%>').style.visibility = "hidden"; return false; }

我将上面的方法连接到一个div onmouseout，我可以隐藏任何控件在页面上，但不是BPE，我试图对BPE所针对的面板做同样的事情，但没有任何事情发生..

I hooked up above methods to one of divs onmouseout, I can hide any control on the page but not BPE and I tried to do the same with panel that BPE is targeting but nothing happend..

我有什么遗漏或BPE就是那样？

Is there something I missed or is BPE just like that?

推荐答案

这实际上并不太难。您可以在页面上创建这样的方法：

This is actually not too tough. You can create a method like this on your page:

<script type="text/javascript"> function hidePopup() { var popupObject = document.getElementById("<%= Panel1.ClientID %>"); popupObject.BalloonPopupControlBehavior.hidePopup(); } </script>

然后从 onmouseout 调用该函数控件的事件是BalloonPopupExtender的 TargetControlID （在我的示例 Panel1 中）。这是我用来测试javascript的代码：

And then call that function from your onmouseout event of the control that is your TargetControlID for the BalloonPopupExtender (in my example Panel1). Here's the code I used to test that javascript:

<asp:Panel ID="Panel1" runat="server" BackColor="#009900" Height="50px" Width="50px" onmouseout="hidePopup();"> </asp:Panel> <asp:BalloonPopupExtender ID="Panel1_BalloonPopupExtender" runat="server" CustomCssUrl="" DisplayOnClick="False" DisplayOnMouseOver="True" DynamicServicePath="" Enabled="True" ExtenderControlID="" TargetControlID="Panel1" BalloonPopupControlID="junk"> </asp:BalloonPopupExtender> <div id="junk"> Hey! Here's some stuff! </div>