Форум

workpage · #1 (**permalink**) 22.02.2023, 19:52

Есть замечательная статья про всплывающие сообщения.
https://itchief.ru/javascript/popup-messages
Всё работает, но есть одно НО. Не понимаю как скрыть из JS выведенное сообщение. Автор пишет, что надо удалить класс toast_show.
Пробовал:

toast-container.classList.remove("toast_show");

Toast.classList.remove("toast_show");

Что-то не работает.

рони · #2 (**permalink**) 22.02.2023, 20:21

workpage,

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <link href="https://itchief.ru/examples/libs/toast/toast.min.css" rel="stylesheet">
    <script src="https://itchief.ru/examples/libs/toast/toast.min.js"></script>
</head>

<body>
    <script>
        let toast = new Toast({
            title: 'Заголовок',
            text: 'Сообщение...',
            theme: 'dark'
        });

        window.setTimeout(() => toast._hide(), 3000)
        window.setTimeout(() => toast._show(), 7000)
    </script>
</body>

</html>

workpage · #3 (**permalink**) 22.02.2023, 22:23

Спасибо за быстрый ответ.
Подскажите, как заставить заработать такую конструкцию?

<!DOCTYPE html>
<html>

<head>
    <title>Untitled</title>
    <meta charset="utf-8">
    <style type="text/css">
    </style>
    <link href="https://itchief.ru/examples/libs/toast/toast.min.css" rel="stylesheet">
    <script src="https://itchief.ru/examples/libs/toast/toast.min.js"></script>
</head>

<body>
    <script>
	var a=1;
	 if (a==1)
		{
		let toast = new Toast({
                title: 'Заголовок',
                text: 'Сообщение...',
                theme: 'dark'});
		}
	toast._hide();
    </script>
</body>

</html>

Браузер ругается: toast is not defined

рони · #4 (**permalink**) 22.02.2023, 22:53

Сообщение от workpage

Браузер ругается: toast is not defined

читать про переменные в js.

Цитата:

Область видимости переменной let – блок {...}

let toast, a = 1;
        if (a == 1) {
            toast = new Toast({
                title: 'Заголовок',
                text: 'Сообщение...',
                theme: 'dark'
            });
        }
        if(toast) toast._hide();

Пожалуйста, отформатируйте свой код!

Для этого его можно заключить в специальные теги: js/css/html и т.п., например:

[html run]
... минимальный код страницы с вашей проблемой
[/html]

О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting.

рони · #5 (**permalink**) 22.02.2023, 23:06

workpage,

let toast = new Toast({
                title: 'Заголовок',
                text: 'Сообщение...',
                theme: 'dark',
                interval: 1,
                autohide: true
            });

делает тоже самое, что код в #4

Форум

Справочник

Discord чат

Курсы javascript