Bootstrap Snippet modal anime js using HTML CSS

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.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.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 ---------->
<h2>
  More Modal Windows 
  <a href="https://tympanus.net/codrops/2013/06/25/nifty-modal-window-effects/">(source)</a>
  <a href="https://codepen.io/chriscoyier/pen/rGifg">(component)</a>
</h2>
<button class="md-trigger" data-modal="modal-1">Fade in & Scale</button>
                    <button class="md-trigger" data-modal="modal-2">Slide in (right)</button>
                    <button class="md-trigger" data-modal="modal-3">Slide in (bottom)</button>
                    <button class="md-trigger" data-modal="modal-4">Newspaper</button>
                    <button class="md-trigger" data-modal="modal-5">Fall</button>
                    <button class="md-trigger" data-modal="modal-6">Side Fall</button>
                    <button class="md-trigger" data-modal="modal-7">Sticky Up</button>
                    <button class="md-trigger" data-modal="modal-8">3D Flip (horizontal)</button>
                    <button class="md-trigger" data-modal="modal-9">3D Flip (vertical)</button>
                    <button class="md-trigger" data-modal="modal-10">3D Sign</button>
                    <button class="md-trigger" data-modal="modal-11">Super Scaled</button>
                    <button class="md-trigger" data-modal="modal-12">Just Me</button>
                    <button class="md-trigger" data-modal="modal-13">3D Slit</button>
                    <button class="md-trigger" data-modal="modal-14">3D Rotate Bottom</button>
                    <button class="md-trigger" data-modal="modal-15">3D Rotate In Left</button>
                    <button class="md-trigger" data-modal="modal-16">Blur</button>
<div class="md-modal md-effect-1" id="modal-1">
  <div class="md-content">
    <h3>Modal Dialog</h3>
    <div>
      <p>This is a modal window. You can do the following things with it:</p>
      <ul>
        <li><strong>Read:</strong> modal windows will probably tell you something important so don't forget to read what they say.</li>
        <li><strong>Look:</strong> a modal window enjoys a certain kind of attention; just look at it and appreciate its presence.</li>
        <li><strong>Close:</strong> click on the button below to close the modal.</li>
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
27
28
29
30
31
32
33
34
35
36
37
/* General styles for the modal */
/* 
Styles for the html/body for special modal where we want 3d effects
Note that we need a container wrapping all content on the page for the 
perspective effects (not including the modals and the overlay).
*/
.md-perspective,
.md-perspective body {
    height: 100%;
    overflow: hidden;
}
.md-perspective body  {
    background: #222;
    -webkit-perspective: 600px;
    -moz-perspective: 600px;
    perspective: 600px;
}
.container {
    background: #e74c3c;
    min-height: 100%;
}
.md-modal {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 50%;
    max-width: 630px;
    min-width: 320px;
    height: auto;
    z-index: 2000;
    visibility: hidden;
    -webkit-backface-visibility: hidden;
    -moz-backface-visibility: hidden;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"modal anime js"
Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"modal anime js" Bootstrap 3.0.0 Snippet by evarevirus

Related: See More

Questions / Comments:

"modal anime js"
Bootstrap 3.0.0 Snippet by evarevirus