1

When I edit a page and try to leave it I get a dialog box that appears and asks me if I want to:

Leave this Page or Stay on this Page

The dialog blocks me from doing anything until I have answered.

In Javascript the only similar thing I see is window.confirm(message) which gives and OK and Cancel button.

So is there another way in Javascript that I can create a dialog that I don't know about? Please note that I want to create a dialog at any time and I am not interested in knowing when the page closes so this is not a duplicate of the question identified by Zeta.

GolezTrol
  • 114,394
  • 18
  • 182
  • 210
  • possibly css blocking access to other elements, javascript tracking unsubmitted forms + window beforeunload event tracker firing in special cases – Yerken Feb 19 '16 at 10:30
  • @zeta - I don't want to check when the window closes. My question asks about creating a dialog and I gave the windows stackoverflow as an example. I want to put up a dialog box at any time with two buttons with different messages. –  Feb 19 '16 at 10:31
  • 1
    Google "modal dialog with css". The basic idea is you cover the page with a transparent or translucent div so the user can't click on the main part of the page, then on top of that you build a dialog with regular html elements, and some JS to show it and respond to button clicks or whatever. – nnnnnn Feb 19 '16 at 10:35
  • see [`window.onbeforeunload`](https://developer.mozilla.org/en-US/docs/Web/API/WindowEventHandlers/onbeforeunload) – Alireza Mirian Feb 19 '16 at 10:37
  • Marilou - this is a duplicate, just not of the one Zeta suggested. And [here is a useful tutorial](https://www.marcozehe.de/2015/02/05/advanced-aria-tip-2-accessible-modal-dialogs/). – nnnnnn Feb 19 '16 at 10:46
  • @Marilou This dialog is created by the browser when you want to ask something before closing the page. Apart from `confirm` (which you already found), there is no option that lets you select between two choices. And there is no possibility to customize the text on the confirm dialog either. You can make kinda-like-modal dialogs using CSS and JavaScript, but they never really are modal. – GolezTrol Feb 19 '16 at 10:47

3 Answers3

1

What happens here, is not an alert() or confirm() or prompt() of any sort.

Write a function for the window.onbeforeunload event handler, load up the parameter with a function passing a message...

➪ ➪ ➪ stackoverflow.com/a/1119324/444255

  • What it generates is a special native dialog by your browser. (You can´t inspect it with devTools, it's not made from HTML... ok, alerts are neither.)
  • You can't get the same dialog for other purposes. (If it was possible, the advertising industry would habe let us known long ago ;-)

You can only 'block' either with ugly alert's and it's siblings, or by putting a shim over your page (to prevent clicks) and a html-made dialog on top. Which should stop other interactions with your page, but of course not navigating away.

Community
  • 1
  • 1
Frank N
  • 9,625
  • 4
  • 80
  • 110
  • *"Please note that I want to create a dialog at any time and I am not interested in knowing when the page closes"* – nnnnnn Feb 19 '16 at 10:43
0

JavaScript doesn't have a built in modal, only alert, confirm and prompt. Many libraries have made their own modals, Bootstrap and jQueryUI for example.

Kruga
  • 721
  • 5
  • 18
0

Your question isn't quite clear. What I understand is that you're interested in the available models.

  • window.alert() gives you the chance to send a notification to the user.
  • window.confirm() gives a popup with an Ok and a Cancel button.
  • window.prompt() gives a popup in which the user can insert text.

http://www.w3schools.com/js/js_popup.asp

Mark
  • 3,224
  • 2
  • 22
  • 30