鼠标悬停时关闭AJAX控制工具包BallonPopupExtender

本文关键字：控制 工具包 BallonPopupExtender AJAX 悬停 鼠标 | 更新日期: 2023-09-27 18:20:53

有人知道如何从客户端关闭Ballon Popup Extender吗？一切都很好，但由于我将BPE设置为在鼠标悬停时显示，它在鼠标悬停后没有任何关闭或隐藏方法，这真的很不切实际。我尝试过：

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

我把上面的方法连接到了一个divs-onmouseout，我可以隐藏页面上的任何控件，但不能隐藏BPE，我试图对BPE所针对的面板做同样的事情，但什么都没发生。。

是我错过了什么，还是BPE就是这样？

鼠标悬停时关闭AJAX控制工具包BallonPopupExtender

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

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

然后从控件的onmouseout事件调用该函数，该控件是BalloonPopupExtender的TargetControlID（在我的示例中为Panel1）。以下是我用来测试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>

正是我想要的。但是，不需要所有额外的javascript，只需将onmouseout="BalloonPopupControlBehavior.hidePopup();"放在控件中即可。

我对jadarnel27的答案进行了一些改进，因为我有多个控件，每个控件都有自己的气球扩展器。

<asp:Image runat="server" ID="imgHelp1" ImageUrl="images/help_16x16.png" />
<ajaxToolkit:BalloonPopupExtender ID="imgHelp1_BalloonPopupExtender" runat="server"
    CustomCssUrl="" DisplayOnClick="False" DisplayOnMouseOver="True" 
    DynamicServicePath="" Enabled="True" ExtenderControlID="" 
    TargetControlID="imgHelp1" BalloonPopupControlID="help1" />
<div id="help1">Help text goes here</div>

然后在后面的代码中

if (!Page.IsPostBack) {
imgHelp1.Attributes.Add("onmouseout", "document.getElementById('"" + imgHelp1.ClientID + "'").BalloonPopupControlBehavior.hidePopup();");
}

通过这种方式，我们完全消除了对javascript函数的需要，并允许在同一页面上有更多控件。

相关文章：