JavaScript provides access to three kinds of dialog boxes: alert(), confirm(), and prompt(). You can do multiple things with pop-ups. For example, you can make information appear on multiple lines in these dialog boxes. You can also move beyond these three basic dialog boxes by creating dialog boxes of your own.

How to control line breaks in JavaScript

Sometimes you need to divide content on multiple lines. To perform this task, you add an escape character to the string. An escape character is a special signal to JavaScript to perform some special processing on a string. It’s actually two characters, the backslash (\) followed by another character. Here’s a list of the escape characters that JavaScript understands:

  • \': single quote

  • \": double quote

  • \\: backslash

  • \n: new line

  • \r: carriage return

  • \t: tab

  • \b: backspace

  • \f: form feed

You can add these escape characters into strings to perform special tasks, such as displaying content on multiple lines. The following example shows how to perform this task.

<input id="btnShow"
    value="Display the Dialog"
    onclick="alert('This is a really long message,' +
     '\r\nso you need to split it on multiple ' +
     'lines');" />

If you were to display this message, without the escape characters, it would display as a single long line. Unfortunately, a single long line may not work on some devices, and it would appear unwieldy on most others. The code adds a \r (carriage return), which moves the cursor back to the beginning of the line, and a \n (newline), which places the cursor on the next line.

As a consequence, the output from the alert() appears on two lines.


How to create a modal dialog box in JavaScript

The three dialog boxes that JavaScript provides by default are helpful, but they aren’t everything that a typical developer requires to create a robust application. There are times when you need a custom dialog box in order to focus the user’s attention on a specific need or requirement.

You can find a number of methods for creating a custom dialog box online, some of which rely on special libraries and produce some dazzling results. The example relies on the overlay method — a simple technique for creating a usable dialog box. The following code shows how you create an overlay using a <div> as part of your page.

<div id="Overlay">
   <p id="DlgContent">Content Goes Here</p>
   <input id="btnYes"
       onclick="DlgHide('Yes')" />
   <input id="btnNo"
       onclick="DlgHide('No')" />

These tags produce a dialog box that contains a message and two buttons labeled Yes and No. You must change the message, but have the option of changing the buttons as needed. For that matter, you need not stick to just two buttons — you can modify the overlay to meet any formatting requirements needed. The overlay can also have any number of inputs desired.

In short, this is a simplification that you can extend quite easily to meet any requirement.

Having just the tags would mean that the viewer could see the overlay at all times. In addition, there would be nothing to distinguish the overlay from the regular information onscreen. With this in mind, you need to create some CSS to differentiate the overlay and to keep it hidden until needed. Here’s one way to approach the task:

  visibility: hidden;
  position: absolute;
  left: 90px;
  top: 120px;
  border: solid;
  background-color: lightgray;

As with the overlay tags, the CSS is fully configurable using JavaScript code. For example, you could add code to center the overlay by changing the left and top values. The example keeps things simple, but it’s important to realize that all of these values are fully configurable.

The dialog box appears when a user clicks a button. To make that happen, you need an onclick event handler. The following code performs the basic tasks required to interact with the dialog box:

function DlgShow(Message)
  // Change the message.
  var Msg = document.getElementById("DlgContent");
  Msg.innerHTML = Message;
  // Display the dialog box.
  var Dlg = document.getElementById("Overlay"); = "visible";

The example provides a configurable message, which is passed to DlgShow() through Message. All you need to do is change the Msg.innerHTML value to change the message. The dialog box is displayed when the code changes the visibility property value to "visible".

Now that the dialog box is visible, you need a way to make it go away again. When the user clicks either Yes or No, the buttons call DlgHide() with an appropriate Result. The following code shows the technique used to make the dialog box disappear:

function DlgHide(Result)
  // Display the result onscreen.
  var Output = document.getElementById("Result");
  Output.innerHTML = "You clicked: " + Result;
  // Hide the dialog box.
  var Dlg = document.getElementById("Overlay"); = "hidden";

In this case, the application also displays the result onscreen. You could return the value for further processing if desired.