0

对不起标题；我什至不知道如何解释这个问题，但我会尽力而为。

我有一个位于 div 内的表单，当单击链接时，该表单显示为深色背景。一个很好的例子是 jQuery 图像库，当单击图像缩略图时，会有一个半透明的 div 覆盖整个页面，其中一个略小的 div 内部显示更大版本的图像。请参阅此演示：http ://themeforest.net/item/ztudio-responsive-portfolio-blog/full_screen_preview/4716505?ref=1stwebdesigner

引用的 URL 和我所拥有的唯一区别是我有一个表单而不是放大的图像。

无论如何，我的问题是这样的：如果用户在输入字段中输入错误的数据，然后使用鼠标选择所有文本，如果将鼠标拖离 div，则 div 将关闭。

我相信问题是由这个功能引起的：

$(document).on('mouseup', function (e) {
    if ($('#log-in').has(e.target).length === 0) {
        $('#log-in').fadeOut(200);
        $('#aLogin').show();
    }
});

HTML：

<div class="fade_bg" id="log-in">
    <div class="actionDiv">
        <span class="errForm" id="loginError"></span>
        <form id="login_form" action="./classes/login/Authenticator.php" method="post">
            <p>username: <input type="text" name="username" id="username" /></p>
            <p>password: <input type="password" name="password" id="password" /></p>
            <p><input type="submit" name="adminLogin" value="Log in" id="adminLogin" /></p>
        </form>
        <p><a id="cancelLogin" href="">Cancel</a></p>
    </div>
</div>

CSS：

div#log-in {
    display: none;
}

我不知道如何修改 jQuery，以便仅当用户显式单击包含表单的 div 外部时，div 才会关闭。有任何想法吗？

4

1 回答 1

1

我会试试这个（通过点击替换鼠标悬停在文档上）：

$(document).on('click', function (e) {
    if ($('#log-in').has(e.target).length === 0) {
        $('#log-in').fadeOut(200);
        $('#aLogin').show();
    }
});

但是如果不看 HTML 就很难确定它是否好

于 2013-06-10T14:43:24.283 回答