Question

我制作了一个HTML表单，其中包含带有javascript的警报消息。我需要在不使用内联CSS的情况下将此警告消息更改为带有Javascript的红色/绿色突出显示框。

这是现在的样子：

function validateFormC() {
let x = document.forms["contactForm"]["name_contact"].value;
if (x === "") {
    alert("Don't forget to fill in your name!");
    return false;
}
x = document.forms["contactForm"]["email_contact"].value;
if (x === "") {
    alert("Don't forget to fill in your e-mail!");
    return false;
}
}

所以我需要得到一个红色/绿色框而不是警报消息。并且在文本框旁边转换警报消息也很好。有什么想法吗？

Answer 1

不。 alert（）接受一个字符串，并使用本机窗口小部件呈现它。没有样式可以设置。

Answer 2

您无法更改警报的味精颜色，但可以使用与警报功能相同的其他插件，并且可以提供精美的警报设计。并且非常易于使用。请检查此。sweet alert

Answer 3

您可以创建（覆盖）alert（），然后可以更新模板样式。

但这不是正确的方法！

alert('Your alert message.');

<script>
window.alert = function(text = '') {
    const d = document;
    const alertId = 'custom-alert';
    const hostname = window.location.hostname;

    const style = `<style id="${alertId}-style">
                #${alertId} {
                    --padding:16px;

                    position:fixed;
                    top:0;
                    left:50%;
                    transform:translateX(-50%);
                    width:450px;
                    min-height:132px;
                    padding:var(--padding);
                    font-family:Arial,sans-serif;
                    box-shadow:0 0 20px 1px rgba(0,0,0,0.4);
                    border-radius:5px;
                    font-size:12px;
                    color:#000
                }

                #${alertId} span {
                    display:block
                }

                #${alertId} span:first-of-type {
                    font-size:var(--padding);
                    padding-bottom:var(--padding)
                }

                #${alertId} span:first-of-type::after {
                    content:attr(data-host)
                }

                #${alertId} span:last-of-type {
                    color:#666
                }

                #${alertId} div {
                    position:absolute;
                    bottom:var(--padding);
                    right:var(--padding);
                    min-width:60px;
                    background:#3F86F4;
                    color:#fff;
                    text-align:center;
                    padding:10px
                }
                #${alertId} div::before {
                    content:attr(data-ok)
                }

                #${alertId} div:active {
                    background:#6ba0f4
                }
            </style>`;

    const template = `<div id="${alertId}">
                        <span data-host="${hostname.length ? hostname : 'localhost'} says"></span>
                        <span>${text}</span>
                        <div data-ok="OK"></div>
                    </div>`;

    d.body.insertAdjacentHTML('beforeend', style + template);

    const alertModal = d.querySelector('#' + alertId);

    alertModal.querySelector('div').addEventListener('click', () => {
        const alertStyle = d.querySelector(`#${alertId}-style`);
        alertStyle.parentNode.removeChild(alertStyle);
        alertModal.parentNode.removeChild(alertModal);
    });
};
</script>

如何在没有内联样式的情况下使用Javascript在表单上添加颜色高亮？

3 个答案: