This pattern shows data in a box.

Basic

Try this button:

Click me

Here’s the code:

<p style="margin-left: 50px;">
  <button id="click_me">Click me</button>
</p>
<script type="text/javascript">
$(document).ready(function () {
  $("#click_me").click(function(){
    alert("Hey! Don't click me!");
  })
});
</script>

Figure 1. Code for a dialog box

Line 7 made the dialog box:

   alert("Hey! Don't click me!");

What the box looks like depends on the browser. Here’s what it looks like in the browser I’m using now:

Figure 2. A dialog box

The box is modal. “Modal” means that the user has to close the box before doing anything else with the page.

Show a variable

Enter some text and click the button:

Animal
Show animal

Here’s the code that shows the dialog box:

var animal = $("#animal").val();
alert("You entered: " + animal);

Figure 3. Showing a variable

This:

   "You entered: " + animal

tells the browser to take the exact text You entered: , and add the contents of the variable animal to the end.