ポップアップログイン画面を作成しようとしています。ユーザーがハイパーリンクにカーソルを合わせると表示され、マウスがポップアップの外に移動すると表示されなくなります。
以下のコードは機能しますが、ユーザー名やパスワードのテキストボックスなど、ポップアップ内の別の要素の上にマウスを移動すると、残念ながらポップアップが誤って閉じます。この欠陥を修正する方法はありますか?
<script type="text/javascript" language="javascript">
function showDiv(display) {
if (display) { document.getElementById('hoverLoginBox').style.display = 'block'; }
else { document.getElementById('hoverLoginBox').style.display = 'none'; }
}
</script>
<asp:HyperLink ID="HyperLink1" runat="server" NavigateUrl="~/register.aspx" CssClass="hyperlink"
onmouseover="showDiv(true);">login</asp:HyperLink>
<div id="hoverLoginBox" onmouseout="showDiv(false);">
<asp:Login ID="Login3" runat="server" CssClass="loginBox" CreateUserText="Create a new Client Account"
CreateUserUrl="~/contact-us.aspx" PasswordRecoveryText="Forgotten Your Password?"
TitleText="" PasswordRecoveryUrl="~/password-recovery.aspx" LoginButtonType="Image"
FailureText="Invalid Username / Password." DestinationPageUrl="~/membership/user-profile.aspx"
FailureAction="RedirectToLoginPage">
<LayoutTemplate>
<asp:TextBox ID="UserName" runat="server" CssClass="textbox">username</asp:TextBox>
<asp:TextBox ID="Password" runat="server" CssClass="textbox">password</asp:TextBox>
<asp:Button ID="Button1" runat="server" CssClass="hoverLoginButton" Text="Login" />
</LayoutTemplate>
</asp:Login>
<div class="loginLinks">
<asp:HyperLink ID="CreateUserLink" runat="server" NavigateUrl="~/register.aspx" CssClass="hyperlink">Create Account</asp:HyperLink> |
<asp:HyperLink ID="PasswordRecoveryLink" runat="server" NavigateUrl="~/password-recovery.aspx"
CssClass="hyperlink">Forgotten Your Password?</asp:HyperLink>
</div>
</div>