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

.modal.fade .modal-dialog { transform: translate(0px, -25%); transition: transform 0.3s ease-out 0s; } .modal.fade.in .modal-dialog { transform: translate(0px, 0px); } .flyover { left: 150%; overflow: hidden; position: fixed; width: 50%; opacity: 0.95; z-index: 1050; transition: left 0.6s ease-out 0s; } .flyover-centered { top: 50%; transform: translate(-50%, -50%); } .flyover.in { left: 50%; }

/* 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'); }); });