Return to Snippet

Revision: 37803
at December 17, 2010 10:09 by alvincrespo

Initial Code
<!DOCTYPE html>
<html lang='en-us' xmlns=''>
  <meta charset='utf-8'>
  <title>Page Title</title>
  <style type="text/css" media="screen">
      margin:0 auto;
      text-align: center;
      padding:0px 0px 25px 0px;
      margin:0 auto;
      text-align: center;
  <div class="button-container">
    <button>Show Form</button>    
  <div class="form-container">
    <form action="event_prop_submit" method="get" accept-charset="utf-8">
      <fieldset id="" class="">
        <legend>Personal Information</legend>
        <label for="first_name">First Name</label><br/>
        <input type="text" name="first_name" value="" id="first_name" />
        <label for="last_name">last_name</label><br/>
        <input type="text" name="last_name" value="" id="last_name">
      <p><input type="submit" value="Continue &rarr;"></p>
  <script src=""></script>
  <script type="text/javascript">
        console.log('click - form');
        //we want all click events in the form to stop at the form-container element, so that the event does not reach the body element
        console.log('click - body');
        //hide the form if the body is clicked

Initial URL

Initial Description
This is essentially how to detect an outside click for a dialog box on a website, using HTML/CSS/Javascript/JQuery. 

Essentially you need to understand event propagation how it works throughout the DOM with JQuery, to make this as simple as possible. Add a listener to the html or body element that detects a click, hide the box when it receives that event. Otherwise, stop the propagation of the event when the container receives it (the event).

If you have any question, or want a further explanation, don't hesitate to get in contact with me.


Initial Title
Hiding a Dialog Box on Outside Click

Initial Tags
css, javascript, html, jquery

Initial Language