Всплывающее сообщение при клике по ссылке с использованием JavaScript

Во время работы над одной из задач я столкнулся с необходимостью вывести всплывающее окно перед перенаправлением посетителя на конкретную ссылку. Мы поработаем с JavaScript confirm, чтобы вывести всплывающее окно, когда кто-то нажимает на ссылку:

Всплывающее сообщение при клике по ссылке с использованием JavaScript
JavaScript всплывающее окно

Этого можно добиться с помощью JavaScript-кода приведенного ниже:

<script type = “text/javascript”> function AlertMsg() {var answer = confirm("You are getting redirected. Click OK to continue.")if(answer)window.location="http://www.dipendrashekhawat.com";}</script> <a href="javascript:AlertMsg();">Click Here</a>

Можно легко использовать событие onclick, применив return false, если не необходимо продолжать:

<script type="text/javascript">function confirmMsg(node) { return confirm("You are getting redirected. Click OK to continue.");}</script><a href="http://www.dipendrashekhawat.com" onclick="return confirmMsg(this);">Кликните здесь</a>

Если вам нужна одна кнопка, используйте alert() вместо window confirm JavaScript. В этом случае всплывающее окно будет содержать только кнопку «ОК».

Полная реализация

<!DOCTYPE html><html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title>JavaScript всплывающее окно при клике по ссылке - Dipendra Shekhawat</title></head><body> <style> #clickhere { color: #3b5998;            text-decoration: underline;        }            #clickhere:hover {                cursor: pointer;                text-decoration: none;                color: #3b5998;            }    </style>    <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css" />    <script src="https://code.jquery.com/jquery-1.10.2.js"></script>    <script src="https://code.jquery.com/ui/1.11.4/jquery-ui.js"></script>    <div id="ConfirmationDialog" class="ModalBackground" style="display: none;"></div>    <span id="clickhere" onclick="javascript:alertMsg();">Click Here</span>    <script type="text/javascript">        function alertMsg() {            var modalHTML = '';            modalHTML += '<div id="ConfirmationMessage">' +                          'Вы будете перенаправлены на другой сайт. Нажмите OK для продолжения.</div>'            $('#ConfirmationDialog').html(modalHTML);            $("#ConfirmationDialog").dialog({                modal: true,                title: 'Confirmation Message',                width: 500,                resizable: false,                buttons: {                    "Ok": function() {                        $('#ConfirmationDialog').dialog("close");                        window.open("http://dipendrashekhawat.com", "_blank")                    },                    Cancel: function() {                        $('#ConfirmationDialog').dialog("close");                    }                }            });        }    </script>    <script src="https://code.jquery.com/jquery-3.0.0.min.js" integrity="sha256-JmvOoLtYsmqlsWxa7mDSLMwa6dZ9rrIdtrrVYRnDRH0=" crossorigin="anonymous"></script>    <script src="https://code.jquery.com/ui/1.12.0-rc.2/jquery-ui.min.js" integrity="sha256-55Jz3pBCF8z9jBO1qQ7cIf0L+neuPTD1u7Ytzrp2dqo=" crossorigin="anonymous"></script></body></html>

Посмотреть демо-версию

Что Вы думаете?

Если у вас есть какие-либо вопросы или предложения по реализации примера с использованием JavaScript alert confirm, напишите об этом в комментариях.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *