<link href="//netdna.bootstrapcdn.com/bootstrap/3.1.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<h2>TEST: Create Fly Over Notification Messages</h2>
<p>
<button class="btn btn-primary js-jumbo" id="btnFly">Try It</button>
</p>
<div id="message1" class="jumbotron flyover flyover-centered">
<button type="button" class="close" aria-hidden="true">×</button>
<h1>Hey!</h1>
<p>
This is the text to show in the message.
<iframe width="560" height="315" src="//www.youtube.com/embed/IKLEfd1_wc8" frameborder="0" allowfullscreen></iframe>
</p>
<button id="btnFly1" class="btn btn-primary">Dismiss</button>
</div>
<hr>
<div class="alert alert-danger fade in">
<button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
<h4>Oh snap! You got an error!</h4>
<p>Change this and that and try again. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Cras mattis consectetur purus sit amet fermentum.</p>
<p>
<button type="button" class="btn btn-danger">Take this action</button>
<button type="button" class="btn btn-default">Or do this</button>
</p>
</div>
</div>
</div>
/*
From
http://www.benknowscode.com/2013/08/create-fly-over-notification-messages-bootstrap.html
*/
$(function() {
// this is the jQuery function if testButton is clicked
// this is the jQuery function if testButton is clicked
$('#btnFly, #btnFly1, .jumbotron').click(function() {
$('#message1').toggleClass('in');
});
});
