Как разместить цветовые выделения на формах с помощью Javascript без встроенных стилей? - PullRequest
Новая
       6

Как разместить цветовые выделения на формах с помощью Javascript без встроенных стилей?

0 голосов
/ 28 февраля 2019

Я сделал HTML-форму, которая состоит из предупреждающего сообщения с javascript.Мне нужно изменить это предупреждающее сообщение на выделение красного / зеленого цвета с помощью Javascript без использования встроенного CSS.

Вот как это выглядит сейчас: 

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;
}
}

Итак, мне нужнополучить красное / зеленое поле вместо предупреждающего сообщения.А также конвертировать оповещение рядом с текстовым полем было бы неплохо.Есть идеи?

Ответы [ 3 ]

0 голосов
/ 28 февраля 2019

Вы не можете изменить цвет сообщения оповещения, но вы можете использовать другой плагин, который работает так же, как оповещение, а также дает красивый дизайн оповещения. И это очень просто в использовании. Пожалуйста, отметьте это. sweet alert

0 голосов
/ 28 февраля 2019

Вы можете создать (перезаписать) 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>
0 голосов
/ 28 февраля 2019

Нет.alert () принимает строку и отображает ее, используя собственный виджет.Там нет положения, чтобы стилизовать его.

...