<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>Alert Message</h2> <p> <button class="btn btn-primary js-jumbo" id="btnFly">Try It</button> </p> <div id="message1" class="jumbotron flyover flyover-centered"> <h1>Hey!</h1> <p> This is the text to show in the message. </p> <button class="btn btn-primary">Dismiss</button> </div> <hr> </div> </div>

.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%; } .flyover.in { left: 50%; } z

$(function() { // this is the jQuery function if testButton is clicked $('#btnFly, #btnFly1, .jumbotron').click(function() { $('#message1').toggleClass('in'); }); });