Альтернатива предупреждающему сообщению Javascript

ProgramBox

Альтернатива предупреждающему сообщению Javascript

Post author:admin
Запись опубликована:12 мая, 2023
Post category:Вопросы по программированию

#javascript #jquery

Вопрос:

На моей онлайн-странице у меня есть простое предупреждающее сообщение. Мне в принципе нужно изменить заголовок, но я читал, что я не могу этого сделать.

Вот код:

 <script>alert("My Message Here");</script>

В предупреждающем сообщении я получаю URL моего веб-сайта, а затем сообщение под ним.

Какая самая быстрая альтернатива наличию предупреждения javascript?

Спасибо

1. Не могли бы вы использовать виджет диалогового окна пользовательского интерфейса jQuery ?

2. Диалоговое окно пользовательского интерфейса jQuery

3. Попробуйте поискать в Google модальный диалог javascript.

Ответ №1:

Мне это очень нравится:http://t4t5.github.io/sweetalert

Это не зависит от какой-либо другой библиотеки JavaScript и легко настраивается. Поддерживает различные виды всплывающих окон с сообщениями, реализует всплывающее окно с приглашением и разрешает объединение сообщений в цепочку.

1. Это вообще не поддерживает добавление HTML. Вы сможете создавать сообщения только в виде открытого текста, и в этом случае, если все, что вы получаете, это открытый текст, какой смысл добавлять целую библиотеку для сообщений в виде открытого текста?

2. @HoldOffHunger вопрос касался быстрой альтернативы простому оповещению JS. Вы найдете это в предлагаемой библиотеке. Достаточно справедливо, если вы ищете что-то другое.

Ответ №2:

Альтернативой является «модальное окно» javascript. Наличие Google для этого должно открыть множество вариантов.

Этот метод позволяет вам оформить div так, как вам нравится, и отобразить его вместо окна предупреждения. Если вы когда-либо видели лайтбокс, эффект и идея очень похожи.

Все они очень просты в реализации. Чаще всего требуется просто включить скрипт, немного CSS и строку jquery для инициализации модального окна в определенном DIV.

Ответ №3:

Если вы хотите быстро вывести отладочную информацию, просто запишите ее в элемент div. Например, для записи ширины и высоты при изменении размера окна:

     window.onresize = function(event) 
    {
      document.getElementById("debug").innerHTML=window.innerWidth "x" window.innerHeight;
    }

     <html>
    <div id="debug">
      Resize your Window to start.
    </div>
    </html>

Ответ №4:

Это можно сделать относительно просто, без лишнего кода и с функцией постепенного включения / выключения. Приведенный ниже пример затухает со скоростью 3 секунды за затухание, но это можно изменить, изменив fadetime переменную и 3s параметр определения CSS transition: opacity 3s; .

Помимо возможности затухания, преимущество этого ответа в том, что он должен быть чрезвычайно простым в использовании при создании действительно настроенной версии. Это решение не делает упор на CSS или стиль, я надеюсь, что оно подчеркивает желаемую функциональность.

 const fadetime = 3000;

document.addEventListener("DOMContentLoaded", function(event) {
  document.getElementById('message-box-creator').addEventListener('click', function(ev) {
      document.body.classList.add('disabled-body');
      fadeInElement(document.getElementById('message-box'));
  });
  
  document.getElementById('close-message-box').addEventListener('click', function(event) {
    document.body.classList.remove('disabled-body');
    fadeOutElement(document.getElementById('message-box'));
  });
    
            // Fading
            // -------------------------------------------------
    
    function fadeInElement(element) {
        element.style.removeProperty('display');
        
        setTimeout(function() {
            element.classList.remove('fade');
        }, 10);
        
        return true;
    }
    
    function fadeOutElement(element) {
        element.classList.add('fade');
        
        setTimeout(function() {
            element.style.display = 'none';
        }, fadetime);
        
        return true;
    }
});

 #message-box {
    top:2%;
    
    left:10%;
    width:80%;
    
    border: 1px solid black;
    background-color:#FFFFFF;
    position:absolute;
    z-index:10000;
}

.disabled-body {
    background-color: rgba(0,0,0,0.5);
}

.fadeable {
    opacity: 1;
    transition: opacity 3s;
}

.fade {
    opacity: 0 !important;
}

 <body>
<div id="message-box" class="fadeable fade" style="display:none;">
<b>Note:</b> Message-box has been activated!<br><br>

<button id="close-message-box">Close</button>
</div>

<button id="message-box-creator">Create Alert</button>
</body>

Бонус: функция отключения кнопок на странице при выполнении предупреждения:

 function disableAllButtons() {
    const buttons = document.getElementsByTagName('button');
    
    for (const button of buttons) {
        button.disabled = true;
    }
    
    document.getElementById('close-message-box').disabled = false;
    
    return true;
}

Запустите эту функцию в прослушивателе событий для отображения сообщения (и обратную для щелчка close ), сделайте то же самое для input и submit , и у вас должна получиться полностью отключенная страница.