Просмотров: 1 143

jQuery. Открыть диалоговое окно, прежде чем перейти по ссылке.

Иногда возникает необходимость, прежде чем пользователь перейдет по ссылке, чтобы возникало диалоговое окно, в котором можно подтвердить свое желание это сделать.

Например, на странице есть ссылка «Удалить». При переходе по ней желательно убедиться, не случайно ли пользователь перешел по ней.

Я хочу поделиться своим решением, которое я использую в этих случаях.

Сама ссылка может выглядеть вот так:

<a href="http://yandex.ru" class="mylink">Ссылка</a>

А это сам код:

<script type="text/javascript">
$(document).ready ( function(){
$(".mylink").on("click", function(e) {
    var link = this;
    e.preventDefault();
    $("<div>Вы уверены, что хотите перейти на yandex?</div>").dialog({
        buttons: {
            "Да": function() {
                window.location = link.href;
            },
            "Отмена": function() {
                $(this).dialog("close");
            }
        }
    });
});
});
</script>

Для работы этого кода к вашей странице должны быть подключены библиотеки jQuery и jQuery UI.

Посмотрите, как это работает вживую.

Открытие ссылки в jsfiddle может не работать в некоторых браузерах, но при вставке кода на реальную страницу все должно работать без проблем.