urban/bar-template.js

## bar-template.js
var TEMPLATES = TEMPLATES || {};

TEMPLATES["bar-modal"] = Hogan.compile(' \
{{<modal-layout}} \
  {{$body}} \
    <p>This is the <b>bar</b> modal!</p> \
  {{/body}} \
  {{$footer}} \
    <footer> \
      <a href="#" data-method="remove" data-target="body > .modal">Cancel</a> \
      <a href="#" data-method="remove" data-target="body > .modal">Okay</a> \
    </footer> \
  {{/footer}} \
{{/modal-layout}} \
');

## data.js
var DATA = DATA || {};

$.extend(true, DATA, {
  "foo-modal": {
    "title": "Foo Modal",
    "hasCloseButton": true
  },
  "bar-modal": {
    "title": "Bar Modal",
    "classNames": "bar-modal"
  }
});

## foo-template.js
var TEMPLATES = TEMPLATES || {};

TEMPLATES["foo-modal"] = Hogan.compile(' \
{{<modal-layout}} \
  {{$body}} \
    <p>This is the <b>foo</b> modal!</p> \
  {{/body}} \
{{/modal-layout}} \
');

## index.html
<!DOCTYPE html>
<html>
  <head>
    <title>Template Inheritance Example</title>
    <link rel="stylesheet" href="https://gist.github.com/urban/5579302#file-screen-css">
  </head>
  <body>

  	<nav id="modal-menu" class="menu">
	    <dl>
	    	<dt>Modal Menu</dt>
	      <dd><a href="#" data-modal-name="foo-modal">Show foo!</a></dd>
	      <dd><a href="#" data-modal-name="bar-modal">Show bar!</a></dd>
	    </dl>
	  </nav>

    <!-- 3rd party libraries -->
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
    <script src="https://gist.github.com/urban/5580457#file-hogan-js"></script>
    <!-- layouts and partials -->
    <script src="https://gist.github.com/urban/5579302#file-modal-layout-js"></script>
    <!-- templates -->
    <script src="https://gist.github.com/urban/5579302#file-foo-template-js"></script>
    <script src="https://gist.github.com/urban/5579302#file-bar-template-js"></script>
    <!-- data -->
    <script src="https://gist.github.com/urban/5579302#file-data-js"></script>
    <script>

      $("#modal-menu").on("click", "a", function (event) {
        event.preventDefault();
        var modalName = $(this).data("modal-name");
        var output = TEMPLATES[modalName].render(DATA[modalName], PARTIALS);
        $("body").append(output);
      });

      $(document).on("click", "a[data-method='remove']", function (event) {
        event.preventDefault();
        var target = $(this).data("target");
        $(target).remove();
      });

    </script>
  </body>
</html>

## modal-layout.js
var PARTIALS = PARTIALS || {};

PARTIALS["modal-layout"] = Hogan.compile(' \
<section class="modal {{classNames}}"> \
  <div class="modal-chrome"> \
    <header> \
      <h3>{{title}}</h3> \
      {{#hasCloseButton}} \
      <a href="#" class="close" data-method="remove" data-target="body > .modal">X</a> \
      {{/hasCloseButton}} \
    </header> \
    <div class="modal-content"> \
      {{$body}} \
        Default content! \
      {{/body}} \
    </div> \
    {{$footer}}{{/footer}} \
  </div> \
</section> \
');

## screen.css
body {
  font: 94% helvetica, arial, freesans, clean, sans-serif;
}

.modal {
	height: 100%;
	left: 0;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 1000;
}

.modal:before {
	background: #fff;
	content: "";
	display: block;
	height: 100%;
	opacity: .75;
	position: absolute;
	width: 100%;
	z-index: -1;
}

.modal-chrome {
	border: 1px solid #78c3f1;
	display: inline-block;
	margin-top: 5%;
	text-align: left;
}

.modal-content {
	margin: 0 20px;
	min-height: 200px;
	min-width: 400px;
}

.modal-chrome > header {
	background: #d4ecfb;
	border-bottom: 1px solid #78c3f1;
	padding: 10px 20px;
	position: relative;
}

.modal-chrome > header h3 {
	margin: 0;
}

.modal-chrome > header .close {
	color: #000;
	font-weight: bold;
	position: absolute;
	right: 20px;
	top: 10px;
	text-decoration: none;
}

.modal.bar-modal .modal-chrome > header {
	background: #999;
	border-bottom-color: #ccc;
}

.modal.bar-modal .modal-chrome {
	background: #2c2c2c;
	border: 1px solid #000;
	color: #fff;
	position: relative;
}

.modal.bar-modal footer {
	bottom: 20px;
	position: absolute;
	right: 20px;
}

.modal.bar-modal footer a {
	background: #666;
	border: 1px solid #ccc;
	color: #fff;
	display: inline-block;
	margin-left: 20px;
	padding: 4px 10px;
	text-decoration: none;
}

nav.menu dl {
	border: 1px solid #78c3f1;
	margin-left: 20px;
	max-width: 150px;
}

nav.menu dt {
	background: #d4ecfb;
}

nav.menu dt,
nav.menu dd {
	border-bottom: 1px solid #78c3f1;
	margin: 0;
	padding: 5px 10px;
}

nav.menu dd:last-child {
	border: 0;
}

nav.menu a {
	text-decoration: none;
}
	var TEMPLATES = TEMPLATES \|\| {};

	TEMPLATES["bar-modal"] = Hogan.compile(' \
	{{<modal-layout}} \
	{{$body}} \
	<p>This is the <b>bar</b> modal!</p> \
	{{/body}} \
	{{$footer}} \
	<footer> \
	<a href="#" data-method="remove" data-target="body > .modal">Cancel</a> \
	<a href="#" data-method="remove" data-target="body > .modal">Okay</a> \
	</footer> \
	{{/footer}} \
	{{/modal-layout}} \
	');
	var DATA = DATA \|\| {};

	$.extend(true, DATA, {
	"foo-modal": {
	"title": "Foo Modal",
	"hasCloseButton": true
	},
	"bar-modal": {
	"title": "Bar Modal",
	"classNames": "bar-modal"
	}
	});
	var TEMPLATES = TEMPLATES \|\| {};

	TEMPLATES["foo-modal"] = Hogan.compile(' \
	{{<modal-layout}} \
	{{$body}} \
	<p>This is the <b>foo</b> modal!</p> \
	{{/body}} \
	{{/modal-layout}} \
	');
	<!DOCTYPE html>
	<html>
	<head>
	<title>Template Inheritance Example</title>
	<link rel="stylesheet" href="https://gist.github.com/urban/5579302#file-screen-css">
	</head>
	<body>

	<nav id="modal-menu" class="menu">
	<dl>
	<dt>Modal Menu</dt>
	<dd><a href="#" data-modal-name="foo-modal">Show foo!</a></dd>
	<dd><a href="#" data-modal-name="bar-modal">Show bar!</a></dd>
	</dl>
	</nav>

	<!-- 3rd party libraries -->
	<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
	<script src="https://gist.github.com/urban/5580457#file-hogan-js"></script>
	<!-- layouts and partials -->
	<script src="https://gist.github.com/urban/5579302#file-modal-layout-js"></script>
	<!-- templates -->
	<script src="https://gist.github.com/urban/5579302#file-foo-template-js"></script>
	<script src="https://gist.github.com/urban/5579302#file-bar-template-js"></script>
	<!-- data -->
	<script src="https://gist.github.com/urban/5579302#file-data-js"></script>
	<script>

	$("#modal-menu").on("click", "a", function (event) {
	event.preventDefault();
	var modalName = $(this).data("modal-name");
	var output = TEMPLATES[modalName].render(DATA[modalName], PARTIALS);
	$("body").append(output);
	});

	$(document).on("click", "a[data-method='remove']", function (event) {
	event.preventDefault();
	var target = $(this).data("target");
	$(target).remove();
	});

	</script>
	</body>
	</html>
	var PARTIALS = PARTIALS \|\| {};

	PARTIALS["modal-layout"] = Hogan.compile(' \
	<section class="modal {{classNames}}"> \
	<div class="modal-chrome"> \
	<header> \
	<h3>{{title}}</h3> \
	{{#hasCloseButton}} \
	<a href="#" class="close" data-method="remove" data-target="body > .modal">X</a> \
	{{/hasCloseButton}} \
	</header> \
	<div class="modal-content"> \
	{{$body}} \
	Default content! \
	{{/body}} \
	</div> \
	{{$footer}}{{/footer}} \
	</div> \
	</section> \
	');
	body {
	font: 94% helvetica, arial, freesans, clean, sans-serif;
	}

	.modal {
	height: 100%;
	left: 0;
	position: fixed;
	text-align: center;
	top: 0;
	width: 100%;
	z-index: 1000;
	}

	.modal:before {
	background: #fff;
	content: "";
	display: block;
	height: 100%;
	opacity: .75;
	position: absolute;
	width: 100%;
	z-index: -1;
	}

	.modal-chrome {
	border: 1px solid #78c3f1;
	display: inline-block;
	margin-top: 5%;
	text-align: left;
	}

	.modal-content {
	margin: 0 20px;
	min-height: 200px;
	min-width: 400px;
	}

	.modal-chrome > header {
	background: #d4ecfb;
	border-bottom: 1px solid #78c3f1;
	padding: 10px 20px;
	position: relative;
	}

	.modal-chrome > header h3 {
	margin: 0;
	}

	.modal-chrome > header .close {
	color: #000;
	font-weight: bold;
	position: absolute;
	right: 20px;
	top: 10px;
	text-decoration: none;
	}

	.modal.bar-modal .modal-chrome > header {
	background: #999;
	border-bottom-color: #ccc;
	}

	.modal.bar-modal .modal-chrome {
	background: #2c2c2c;
	border: 1px solid #000;
	color: #fff;
	position: relative;
	}

	.modal.bar-modal footer {
	bottom: 20px;
	position: absolute;
	right: 20px;
	}

	.modal.bar-modal footer a {
	background: #666;
	border: 1px solid #ccc;
	color: #fff;
	display: inline-block;
	margin-left: 20px;
	padding: 4px 10px;
	text-decoration: none;
	}

	nav.menu dl {
	border: 1px solid #78c3f1;
	margin-left: 20px;
	max-width: 150px;
	}

	nav.menu dt {
	background: #d4ecfb;
	}

	nav.menu dt,
	nav.menu dd {
	border-bottom: 1px solid #78c3f1;
	margin: 0;
	padding: 5px 10px;
	}

	nav.menu dd:last-child {
	border: 0;
	}

	nav.menu a {
	text-decoration: none;
	}