var $msgModal = $('#msgModal').modal({backdrop : false, show : false, keyboard : false}),
  showMsg = function (header, text, callback) {
      .find('.modal-header > h3').text(header).end()
        .on('click.callback', callback).end()
  headers = ["OMG!!", "WAT", "Alert", "Random Notice"],
  bodies = [
    "You're not supposed to do that!",
    "It's over 9000!!!",
    "We're doing it live!"
$('#modalPopper').click(function (e) {
  var d = new Date();
    function () {
      console.log("Closing message from event", d, e);
<!DOCTYPE html>
<html lang="en">
    <meta charset="utf-8">
    <title>Bootstrap, from Twitter</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">

    <!-- Le styles -->
    <link href="//" rel="stylesheet">
    <link href="//" rel="stylesheet">
    <!--[if lt IE 8]>
      <link href="//" rel="stylesheet">
    <link href="style.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//"></script>


    <div class="navbar navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          <a class="brand" href="#">Project name</a>
          <div class="nav-collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#about">About</a></li>
              <li><a href="#contact">Contact</a></li>
          </div><!--/.nav-collapse -->

    <div class="container">

      <h2>Random Modal Message</h2>
      <a id="modalPopper" href="#" class="btn">Popup Modal Message</a>
    <div id="msgModal" class="modal hide fade">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
      <div class="modal-body">
      <div class="modal-footer">
        <button class="btn btn-primary callback-btn" data-dismiss="modal">Close</button>
    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="//"></script>
    <script src="//"></script>
    <script src="script.js"></script>
body {
  padding-top: 60px;

@media (max-width: 979px) {

  /* Remove any padding from the body */
  body {
    padding-top: 0;