Question

我正在构建一个jQuery表单字段验证器，目前我正在构建CSS中的弹出通知。

问题是，无论.notification-point属性的应用如何，我都无法将.notification-body与margin-top/padding-top的中心对齐。

这是我的JsFiddle的链接：http://jsfiddle.net/Z6Jtd/8/

非常感谢任何帮助/编辑！

Answer 1

解决方案：http://jsfiddle.net/vonkly/Z6Jtd/9/

你去。

注意：我改变了你的javascript。我删除了.fadeOut;我强烈建议为.focusout()创建一个函数 - 或者更好的是，检测值的更改，当它与所需规则匹配时，隐藏消息。

对于未来的读者：

此问题的解决方案是将标记（“点”）和正文（“消息”）包装在position: relative;的容器中在它上面。

然后，我使用position: absolute;和top: 8px定位了标记。

接下来，我将margin-left: 12px添加到消息，以便不与标记重叠。

<强> CSS

input[type="text"], input[type="password"] {
    display: inline-block;
    font: bold 13px Arial;
    color: #555;
    width: 300px;
    padding: 8px 10px;
    border: 0;
}

.notify-wrap {
    position: relative;
    display: none;
}

.notify-point {
    position: absolute;
    top: 8px;
    display: inline-block;
    border-style: solid;
    border-color: transparent rgba(0, 0, 0, 0.75) transparent transparent;
    border-width: 6px;
}

.notify-body {
    margin-left: 12px; /* push the body out to make room for point */
    padding: 8px 10px;
    font: bold 11px Arial, Helvetica;
    color: #fff !important;
    background-color: rgba(0, 0, 0, 0.75);
}

注意：以上代码已修改为不占用border-radius等空间的负载

<强> HTML

<div id="email">
<input name="1" type="text" value="Enter your email address"/>
    <div class="notify-wrap x1">
        <div class="notify-point"></div>
        <div class="notify-body">
            You've entered an invalid email address.
        </div>
    </div>
</div>

注意：在 notify-wrap 上，我添加了类x1来定义特定的错误消息，以便与OP的原始格式保持一致。

Javascript （jQuery）

$('input').focus( function() {
    var num = $(this).attr('name');
    $('div.notify-wrap.x' + num).css('display','inline-block');
});

边缘顶部/填充顶部没有效果？

1 个答案: