Question

对不起标题;我甚至不知道如何解释这个问题，但我会尽我所能。

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

引用的网址与我所拥有的唯一区别在于我有一个表单而不是放大的图像。

无论如何，我的问题是这样的：如果用户在输入字段中输入了错误的数据，然后使用鼠标选择所有文本，那么如果鼠标被拖离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。有什么想法吗？

Answer 1

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

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

但是如果没有看到HTML也很难确定它是否合适

jQuery - 选择输入字段中的所有文本将关闭表单

1 个答案: