Вывести всплывающие окно

Question

Имеется функция js, которая вызывает AJAX Process. AJAX Process возвращает good или error. Необходимо при возврате error вывести всплывающие окно с сообщением. Делал через alert - вывод сообщения зацикливается и все. Подскажите, как сделать, чтобы сообщение отображалось единоразово. Сам код вот:

          apex.server.process("save_data", {
                  x01: planval,
                  x02: rn,
                  x03: val,
                  x04: field
              }, {
                  success: function(data) {
                     if (data.status === ''good'') {
                          $(obj).css(''border-bottom'', ''2px solid green'');
                      } else {
                          $(obj).css(''border-bottom'', ''2px solid red'');
                      }
                  }
              });
        }

Answer 1

Я создавал и удалял элемент tooltip при клике на кнопку. Всё что вам нужно сделать, это создавать tooltip не по клику, а по условию. И можете добавить setTimeout, чтобы по истечению времени tooltip удалялся автоматически из дом-дерева.

const good = document.querySelector('.button-good');
const error = document.querySelector('.button-error');

good.addEventListener('click', () => {
    const tooltip = document.createElement('div');
    tooltip.classList.add('tooltip')
    tooltip.innerHTML = `
        <p>Good Text</p>
        <button class="clouse">X</button>
    `;
    document.body.appendChild(tooltip);

    const clouse = tooltip.querySelector('.clouse');
    clouse.addEventListener('click', () => {
        tooltip.remove();
    })
});

error.addEventListener('click', () => {
    const tooltip = document.createElement('div');
    tooltip.classList.add('tooltip')
    tooltip.innerHTML = `
        <p>Error Text</p>
        <button class="clouse">X</button>
    `;
    document.body.appendChild(tooltip);

    const clouse = tooltip.querySelector('.clouse');
    clouse.addEventListener('click', () => {
        tooltip.remove();
    })
});

.tooltip {
    width: 100px;
    height: 80px;
    text-align: center;
    position: absolute;
    left: 100px;
    top: 100px;
    background-color: lightgray;
    border: 1px solid black;
    border-radius: 10px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button class="button-good">Good</button>
    <button class="button-error">Error</button>
</body>
</html>

БЛОГ НА HUSL

Вывести всплывающие окно

Ответы (1 шт):