ajsharp/gist:157816

## gistfile1.htm
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
  "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
    <head>
	<title>Test Page</title>
	<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
	<script type="text/javascript" src="js/livepipe/livepipe.js"></script>
	<script type="text/javascript" src="js/livepipe/window.js"></script>

<script type="text/javascript">

  function addObservers() {
    // "attach" the following behavior to the submit event of the form with id="my_form"
    $('my_form').observe('submit', function(event) {
      // when the form is submitted create a new Modal object
      var modal_window = new Control.Modal($(document.body).down('[id=modal]'), {
        closeOnClick : false
      });

      // Now open that modal object, which will in turn display the contents of the #hidden div
      modal_window.open();
    });

  } // end of function

  document.observe('dom:loaded', addObservers);

</script>

<style type="text/css">
#control_overlay {
  background: #000;
}

.modal {
  background: #fff;
}

#hidden {
  background: #fff;
}
</style>
</head>
<body>

  <div id="hidden" style="display: none;">This was totally hidden before</div>

    <form id="my_form" action="#">
        <input id="name" name="name" type="text" />

        <input id="commit" name="commit" type="submit" />
    </form>
    <a href="#hidden" id="modal"></a>
</body>
</html>
	<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
	<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
	<head>
	<title>Test Page</title>
	<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
	<script type="text/javascript" src="js/livepipe/livepipe.js"></script>
	<script type="text/javascript" src="js/livepipe/window.js"></script>

	<script type="text/javascript">

	function addObservers() {
	// "attach" the following behavior to the submit event of the form with id="my_form"
	$('my_form').observe('submit', function(event) {
	// when the form is submitted create a new Modal object
	var modal_window = new Control.Modal($(document.body).down('[id=modal]'), {
	closeOnClick : false
	});

	// Now open that modal object, which will in turn display the contents of the #hidden div
	modal_window.open();
	});

	} // end of function

	document.observe('dom:loaded', addObservers);

	</script>

	<style type="text/css">
	#control_overlay {
	background: #000;
	}

	.modal {
	background: #fff;
	}

	#hidden {
	background: #fff;
	}
	</style>
	</head>
	<body>

	<div id="hidden" style="display: none;">This was totally hidden before</div>

	<form id="my_form" action="#">
	<input id="name" name="name" type="text" />

	<input id="commit" name="commit" type="submit" />
	</form>
	<a href="#hidden" id="modal"></a>
	</body>
	</html>