Bootstrap Snippet TEST: Create Fly Over Notification Messages using HTML CSS jQuery

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<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>
    
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
.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%;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
/*
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');
    });
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"TEST: Create Fly Over Notification Messages"
Bootstrap 3.1.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST: Create Fly Over Notification Messages" Bootstrap 3.1.0 Snippet by mrmccormack

Related: See More

Questions / Comments:

"TEST: Create Fly Over Notification Messages"
Bootstrap 3.1.0 Snippet by mrmccormack