kixxauth/sane-modal.html

## 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="yourname@example.com" />

		<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>

## 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="yourname@example.com" />

	<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);