kixxauth · October 1, 2012 14:42
diff --git a/sane-modal.html b/sane-modal.html
 <!DOCTYPE html>
 <html lang="en">
 <head>
 <meta charset="utf-8">
 <title>Sane Modal</title>
 <meta name="viewport" content="width=device-width">
 </head><body>

 <!-- All "normal" content goes in the base layer -->
 <div id="base-layer">

 <header class="masthead">
 	<hgroup>
 		<h1 class="header content">Sane Modal</h1>
 		<h2 class="subheader content">Your users will love you.</h2>
 		<p class="logo content">
 			<img src="/images/www/logo.png" width="100%" alt="Logo" />
 		</p>
 	</hgroup>
 </header>

 <article class="main-marketing">

 	<section class="product-copy">
 		<h3 class="header">Better User Experience</h3>
 		<p class="content">
 		This method of running modal dialogs with JavaScript will be much more user friendly.
 		</p>
 	</section>

        <div id="call-to-action">
                <button id="open-dialog" href="#dialog">Subscribe</button>
        </div>

 </article>
 <footer class="page-footer">
 	<p class="content credits">
 	Handcrafted and lovingly maintained by the fine folks at
 	<a href="http://www.fireworksproject.com"
 		title="This website is built by Fireworks Project Inc.">Fireworks Project Inc.</a>.
 	</p>
 	<p class="content legal">
 	&copy; 2012 by
 	<a href="http://www.fireworksproject.com"
 		title="Copyright by Fireworks Project Inc.">Fireworks Project Inc.</a>
 	</p>
 </footer>
 </div><!-- #base-layer -->

 <!-- all your modal dialogs go outside your base layer with display:none; set
 so they are not part of the page flow -->
 <div id="dialog" style="display:none;">
 	<form action="/subscribers/" method="POST">
 		<h3 class="header">Subscribe</h3>

 		<label for="id_email">Email:</label>
 		<input name="email" id="id_email" type="email" size="24" placeholder="[email protected]" />

 		<label for="id_zip">Zip:</label>
 		<input name="zip" id="id_zip" type="text" size="8" placeholder="zip code" />

 		<input type="submit" value="Subscribe" class="btn btn-primary btn-large btn-block" />
 		<input type="reset" value="Cancel" class="btn btn-large btn-block" />
 	</form>
 </div>

 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
 <script src="/js/sane-modal.js"></script>

 </body></html>
diff --git a/sane-modal.js b/sane-modal.js
 var VIEW = (function () {
    var VIEW = {}
      , $dialog = $('#dialog')
      , $base = $('#base-layer')
      , scrollPos = null


    function hideBaseLayer() {
        // by using visibility:hidden; we are able to maintain scroll position
        $base.css('visibility', 'hidden');
    }

    function showBaseLayer() {
        // Return the base view back to the scroll position where the user last
        // saw it. This way, they don't get lost on your UI.
        $(window).scrollTop(scrollPos);

        scrollPos = null; // Reset for the next dialog open event
        $base.css('visibility', 'visible'); // then show the base layer again
    }

    VIEW.showDialog = function () {
        var $w = $(window)
          , thisScrollPos = $w.scrollTop()
          , offset

        // Cache the current scroll position of the base layer. This is the
        // last place where the user has seen the base layer, and we want to
        // be able to put them right back there after the modal dialog
        // closes.
        if (scrollPos is null) scrollPos = thisScrollPos;

        hideBaseLayer(); // Make the base layer invisible

        // determine the offset from the top of the page to position the dialog
        // at. (adjust these numbers for your UI by experimenting)

        offset = 20 // default

        // If this is bigger than a smartphone, then offset should be 10% of
        // the viewport
        if ($w.innerWidth() > 700) {
            offset = $w.innerHeight() * .1;
        }

        topPosition = thisScrollPos + offset;
        // position and show the dialog
        $dialog.css('top', topPosition + 'px').show();
        
        return false; // use this function as a click handler
    };

    VIEW.closeDialog = function () {
        $dialog.hide();
        showBaseLayer();
        return false; // use this function as a click handler
    };

    return VIEW;
 }());

 $('#open-dialog').click(VIEW.openDialog);
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>Sane Modal</title>
	<meta name="viewport" content="width=device-width">
	</head><body>

	<!-- All "normal" content goes in the base layer -->
	<div id="base-layer">

	<header class="masthead">
	<hgroup>
	<h1 class="header content">Sane Modal</h1>
	<h2 class="subheader content">Your users will love you.</h2>
	<p class="logo content">
	<img src="/images/www/logo.png" width="100%" alt="Logo" />
	</p>
	</hgroup>
	</header>

	<article class="main-marketing">

	<section class="product-copy">
	<h3 class="header">Better User Experience</h3>
	<p class="content">
	This method of running modal dialogs with JavaScript will be much more user friendly.
	</p>
	</section>

	<div id="call-to-action">
	<button id="open-dialog" href="#dialog">Subscribe</button>
	</div>

	</article>
	<footer class="page-footer">
	<p class="content credits">
	Handcrafted and lovingly maintained by the fine folks at
	<a href="http://www.fireworksproject.com"
	title="This website is built by Fireworks Project Inc.">Fireworks Project Inc.</a>.
	</p>
	<p class="content legal">
	© 2012 by
	<a href="http://www.fireworksproject.com"
	title="Copyright by Fireworks Project Inc.">Fireworks Project Inc.</a>
	</p>
	</footer>
	</div><!-- #base-layer -->

	<!-- all your modal dialogs go outside your base layer with display:none; set
	so they are not part of the page flow -->
	<div id="dialog" style="display:none;">
	<form action="/subscribers/" method="POST">
	<h3 class="header">Subscribe</h3>

	<label for="id_email">Email:</label>
	<input name="email" id="id_email" type="email" size="24" placeholder="[email protected]" />

	<label for="id_zip">Zip:</label>
	<input name="zip" id="id_zip" type="text" size="8" placeholder="zip code" />

	<input type="submit" value="Subscribe" class="btn btn-primary btn-large btn-block" />
	<input type="reset" value="Cancel" class="btn btn-large btn-block" />
	</form>
	</div>

	<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
	<script src="/js/sane-modal.js"></script>

	</body></html>
	var VIEW = (function () {
	var VIEW = {}
	, $dialog = $('#dialog')
	, $base = $('#base-layer')
	, scrollPos = null


	function hideBaseLayer() {
	// by using visibility:hidden; we are able to maintain scroll position
	$base.css('visibility', 'hidden');
	}

	function showBaseLayer() {
	// Return the base view back to the scroll position where the user last
	// saw it. This way, they don't get lost on your UI.
	$(window).scrollTop(scrollPos);

	scrollPos = null; // Reset for the next dialog open event
	$base.css('visibility', 'visible'); // then show the base layer again
	}

	VIEW.showDialog = function () {
	var $w = $(window)
	, thisScrollPos = $w.scrollTop()
	, offset

	// Cache the current scroll position of the base layer. This is the
	// last place where the user has seen the base layer, and we want to
	// be able to put them right back there after the modal dialog
	// closes.
	if (scrollPos is null) scrollPos = thisScrollPos;

	hideBaseLayer(); // Make the base layer invisible

	// determine the offset from the top of the page to position the dialog
	// at. (adjust these numbers for your UI by experimenting)

	offset = 20 // default

	// If this is bigger than a smartphone, then offset should be 10% of
	// the viewport
	if ($w.innerWidth() > 700) {
	offset = $w.innerHeight() * .1;
	}

	topPosition = thisScrollPos + offset;
	// position and show the dialog
	$dialog.css('top', topPosition + 'px').show();

	return false; // use this function as a click handler
	};

	VIEW.closeDialog = function () {
	$dialog.hide();
	showBaseLayer();
	return false; // use this function as a click handler
	};

	return VIEW;
	}());

	$('#open-dialog').click(VIEW.openDialog);