JavaScript всплывающее окно при клике по ссылке — Dipendra Shekhawat

confirm ( )

Функция придёт на помощь когда лень делать красивое модальное окно.

Время чтения: меньше 5 мин

Кратко

Скопировать ссылку «Кратко» Скопировано

При помощи функции confirm ( ) можно вывести на экран пользователя модальное окно с текстом и кнопками «Ок» и «Отмена».

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

Пример

Скопировать ссылку «Пример» Скопировано

💡 Это крайне быстрый вариант кода, который взаимодействует с пользователем, но окно созданное таким образом не изменяется через CSS, а значит использовать его лучше только для прототипирования интерфейса. В финальном варианте веб-страницы использовать модальное окно нежелательно.

Как пишется

Скопировать ссылку «Как пишется» Скопировано

confirm ( ) принимает один аргумент — это текст, который появится в модальном окне.

Результат работы confirm ( ) можно записать в переменную:

 var answer1 = confirm('Подтвердите удаление') var answer1 = confirm('Подтвердите удаление')    Скопировать Скопировано Не удалось скопировать   

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

Как понять

Скопировать ссылку «Как понять» Скопировано

Аргумент для confirm ( ) должен быть строкой. Если это не так, то JavaScript автоматически приведёт его к строке. Такое поведение не доставляет проблем, пока аргумент является примитивом или встроенным типом, имеющим правила приведения к строке. Если же в функцию передать объект, то получится непонятно:

 confirm('Подтвердите переход на страницу')// Текст: 'Подтвердите переход на страницу' confirm(< message: 'Подтвердите переход' >)// '[object Object]' confirm('Подтвердите переход на страницу') // Текст: 'Подтвердите переход на страницу' confirm( message: 'Подтвердите переход' >) // '[object Object]'    Скопировать Скопировано Не удалось скопировать   

💡 Результат вызова confirm ( ) — булево значение: true если нажать «Окей» и false если нажать «Отмена».

 var result = confirm('Удалить элемент?') if (result)  alert('Элемент удален!')> else  alert('Операция прервана')> var result = confirm('Удалить элемент?') if (result)  alert('Элемент удален!') > else  alert('Операция прервана') >    Скопировать Скопировано Не удалось скопировать   

На практике

Скопировать ссылку «На практике» Скопировано

Дока Дог советует

Скопировать ссылку «Дока Дог советует» Скопировано

🛠 Пример использования confirm ( ) с самостоятельно созданным диалоговым окном:

Источник

Prompt user for confirmation when clicking a link

I have a link that does some potentially dangerous function (delete something). I want to prompt user if he really wants to do it. I want to do it with javascript and it should be very simple. My solutions so far:

.. does not work. Even if true is returned on clicking Ok, link is not navigated. What is the correct way to implement this?

Which browser are you having problems with? The first solution seems to work for left and middle clicks in Chrome.

Don’t use a link (or any kind of GET request) to delete stuff. The HTTP spec defines GET as being safe. Use a form with a submit button. (And then middle click won’t bypass the onsubmit event).

+1 because even though I wouldn’t use it for delete confirmation, it’s useful for other things like telling the user the form data they’re editing will be lost if they navigate away.

2 Answers 2

I just solved this problem for an online banking client. FDIC requires a confirmation «speedbump» whenever the user is navigating to a third party site. We wanted to do it unobtrusively, and make it impossible to get around.

I’ve tested this with IE, Firefox, Chrome, and Android— click, right click, middle click, shift click, shift F10, enter, long tap, everything (Firefox is the hard one). Either you get the speedbump or you get a blank tab, you can’t get around it.

document.ready = function() < var handleSpeedBump = function(e) < e.preventDefault(); var href = this.getAttribute("data-href"); var sure = confirm("Are you sure you want to navigate to " + href + "? This is a third party site and not owned by this institution."); if (!sure) return; document.location = href; >$("a.speedbump") .click(handleSpeedBump) .bind("contextmenu", handleSpeedBump) .dblclick(handleSpeedBump) .each(function() < var href = this.href; this.setAttribute("data-href", href); this.href = "javascript:void('Navigate to " + href.replace("'", "") + "')"; >) > 

To make this work, just write your link per normal and add «speedbump» to its classes.

Источник

Display confirmation popup with JavaScript upon clicking on a link

I already have a message() function working. I just need to know what the input type for a hyperlink would be.

4 Answers 4

When the user clicks the link, the confirm function will be called. If the confirm function returns false , the link traversal is cancelled, if true is returned, the link is traversed.

(you can also return the confirm right away, I separated it for the sake of readability)

Tested in FF, Chrome and IE

As Nahom said, except I would put the javascript:message() call directly in the href part (no need for onclik then).

Note: leaving the JavaScript call in the onClick has a benefit: in the href attribute, you can put a URL to go to if the user doesn’t have JavaScript enabled. That way, if they do have JS, your code gets run. If they don’t, they go somewhere where they are instructed to enable it (perhaps).

Now, your message routine must not only ask the question, but also use the answer: if positive, it must call submit() on the form to post the form. You can pass this in the call to ease the fetching of the form.

Personally, I would go for a button (input tag as you show) instead of a simple link to do the process: it would use a more familiar paradigm for the users.

[EDIT] Since I prefer to verify answers I give, I wrote a simple test:

Yes, the submit just reload the page here. Tested only in FF3.

[EDIT] Followed suggestion in the comments. 🙂

Источник

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

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

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

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

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

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

       #clickhere < color: #3b5998; text-decoration: underline; >#clickhere:hover   Click Here     

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

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

ВЛ Виктория Лебедева автор-переводчик статьи « JavaScript Popup Alert on Link Click »

Дайте знать, что вы думаете по данной теме статьи в комментариях. Мы крайне благодарны вам за ваши комментарии, дизлайки, лайки, подписки, отклики!

Источник