var $msgModal = $('#msgModal').modal({backdrop : false, show : false, keyboard : false}),
  showMsg = function (header, text, callback) {
    $msgModal
      .find('.modal-header > h3').text(header).end()
      .find('.modal-body').text(text).end()
      .find('.callback-btn').off('click.callback')
        .on('click.callback', callback).end()
      .modal('show');
  },
  headers = ["OMG!!", "WAT", "Alert", "Random Notice"],
  bodies = [
    "Yep...",
    "You're not supposed to do that!",
    "It's over 9000!!!",
    "We're doing it live!"
  ];
  
$('#modalPopper').click(function (e) {
  var d = new Date();
  showMsg(headers[Math.floor(Math.random()*headers.length)],
    bodies[Math.floor(Math.random()*bodies.length)],
    function () {
      console.log("Closing message from event", d, e);
  });
});
<!DOCTYPE html>
<html lang="en">
  <head>
    <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="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/css/bootstrap.no-icons.min.css" rel="stylesheet">
    <link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome.css" rel="stylesheet">
    <!--[if lt IE 8]>
      <link href="//netdna.bootstrapcdn.com/font-awesome/2.0/css/font-awesome-ie7.css" rel="stylesheet">
    <![endif]-->
    <link href="style.css" rel="stylesheet">

    <!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
      <script src="//html5shim.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>

  <body>

    <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>
          <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>
            </ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <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>
        <h3></h3>
      </div>
      <div class="modal-body">
      </div>
      <div class="modal-footer">
        <button class="btn btn-primary callback-btn" data-dismiss="modal">Close</button>
      </div>
    </div>
    </div> <!-- /container -->

    <!-- Le javascript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script src="//netdna.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>
    <script src="script.js"></script>
  </body>
</html>
body {
  padding-top: 60px;
}

@media (max-width: 979px) {

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