Warning: Constant USER_COOKIE already defined in /var/www/admin/www/markimarta.ru/wp-config.php on line 85

Warning: Constant PASS_COOKIE already defined in /var/www/admin/www/markimarta.ru/wp-config.php on line 86

Warning: Constant AUTH_COOKIE already defined in /var/www/admin/www/markimarta.ru/wp-config.php on line 87

Warning: Constant SECURE_AUTH_COOKIE already defined in /var/www/admin/www/markimarta.ru/wp-config.php on line 88

Warning: Constant LOGGED_IN_COOKIE already defined in /var/www/admin/www/markimarta.ru/wp-config.php on line 89

Warning: Constant TEST_COOKIE already defined in /var/www/admin/www/markimarta.ru/wp-config.php on line 90
Замена стандартных сообщений alert с помощью Javascript « Марк и Марта.Ру. Записки отца-программиста




Замена стандартных сообщений alert с помощью Javascript


Warning: Undefined variable $thumbnail in /var/www/admin/www/markimarta.ru/wp-content/themes/markimarta2023/single.php on line 44

Warning: Attempt to read property "ID" on null in /var/www/admin/www/markimarta.ru/wp-content/themes/markimarta2023/single.php on line 44

Warning: Undefined variable $thumbnail in /var/www/admin/www/markimarta.ru/wp-content/themes/markimarta2023/single.php on line 45

Warning: Attempt to read property "post_title" on null in /var/www/admin/www/markimarta.ru/wp-content/themes/markimarta2023/single.php on line 45

Javascript позволяет заменить всплывающие сообщения alert. Для этого можно воспользоваться плагином SweetAlert. Плагин не требует подключение jQuery, потому, если ваш сайт не использует его, то красивые всплывающие алерты не утяжелят его.

В отличие от классического alert, в котором есть только одна кнопка, в алертах SweetAlert могут быть 2 кнопки.

Загрузить плагин можно со страницы проекта на гитхабе: https://github.com/t4t5/sweetalert

Для подключения плагина необходимо подключить к странице 1 js файл и 1 css файл. Также для лучшей визуализации добавьте стиль для кнопок:

    <link href="Content/sweetalert.css" rel="stylesheet" />
    <script src="Scripts/sweetalert.min.js"></script>
    <style>
        .btn {
            display: block;
            width: 150px; text-align: center;   
            padding: 5px 10px; border: #ccc 1px solid;
            margin: 20px 0px;
        }
    </style>

 

Примеры использования плагина SweetHeart:

   <script>
        function ErrorMsg() {
            swal({ title: "Ошибка!", text: "Произошла ошибка!", type: "error", confirmButtonText: "Ok" });
        }
    </script>

    <div id="errrorBtn" onclick="ErrorMsg()" class="btn">Ошибка!</div>


    <script>
        function AutoClose() {
            swal({ title: "Автоматически закрывающийся алерт!", text: "Окно будет закрыто через 2 секунды", timer: 2000, showConfirmButton: false });
        }
    </script>
    <div id="autocloseBtn" onclick="AutoClose()" class="btn">Автоматическое закрытие</div>

    <script>
        function Question() {
            swal({
                title: "Вы уверены?", text: "Вы не сможете восстановить файл!",
                type: "warning", showCancelButton: true, confirmButtonColor: "#DD6B55", confirmButtonText: "Да, удалить!", closeOnConfirm: false
            },
            function () {
                swal("Файл удален!", "Ваш файл удален.", "success");
            });
        }
    </script>
    <div id="questionBtn" onclick="Question()" class="btn">Удалить файл?</div>

 


Комментариев нет »

No comments yet.

RSS feed for comments on this post. TrackBack URL

Leave a comment





Срок проверки reCAPTCHA истек. Перезагрузите страницу.



MarkiMarta.ru. Записки отца-программиста" с 2009 г.
Категория информационной продукции 18+
Яндекс.Метрика