Bootstrap Snippet JavaScript-less Bootstrap Modals 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="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.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>JavaScript-less Bootstrap Modals</h2>
    </div>
</div>
<div class="[ container text-center ]">
    <label type="button" class="btn btn-primary btn-lg" for="myModal">
        Launch Demo Modal
    </label>
    <label type="button" class="btn btn-primary btn-lg" for="myModalSecond">
        Launch Second Demo Modal
    </label>
</div>
<div class="[ container text-center ]">
    <p>Please keep in mind this is something I threw together in about an hour a friend asked if it was possible. There are a few issues that I noticed while testing. One is that when the modal is opening you will see the background move with the modal, this is because it is moving all as one, best fix is to replace the bounce animation with a fade animation. The second bug is that when you close a modal it quickly disappears and reappears.</p>
</div>
<input type="checkbox" id="myModal" name="myModal" data-toggle="modal">
<div id="" class="modal fade in" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <label type="button" class="close" data-dismiss="modal" aria-label="Close" for="myModal"><span aria-hidden="true">×</span></label>
                <h4 class="modal-title" id="myModalLabel">Demo Modal Title<a class="anchorjs-link" href="#myModalLabel"><span class="anchorjs-icon"></span></a></h4>
            </div>
            <div class="modal-body">
                <h4 id="text-in-a-modal">Text in a modal<a class="anchorjs-link" href="#text-in-a-modal"><span class="anchorjs-icon"></span></a></h4>
                <p>Duis mollis, est non commodo luctus, nisi erat porttitor ligula.</p>
                <h4 id="overflowing-text-to-show-scroll-behavior">Overflowing text to show scroll behavior<a class="anchorjs-link" href="#overflowing-text-to-show-scroll-behavior"><span class="anchorjs-icon"></span></a></h4>
                <p>Cras mattis consectetur purus sit amet fermentum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Morbi leo risus, porta ac consectetur ac, vestibulum at eros.</p>
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
.modal {
    background-color: rgba(0, 0, 0, 0.5);
    overflow: auto;
}
input[type="checkbox"][data-toggle="modal"] {
    left: -10px;
    position: fixed;
    top: -10px;
}
input[type="checkbox"][data-toggle="modal"]:checked + .modal { 
    -webkit-animation-name: bounceInDown;
    animation-name: bounceInDown;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: block;
    opacity: 1;
}
input[type="checkbox"][data-toggle="modal"]:focus:not(:checked) + .modal { 
    -webkit-animation-name: bounceOutUp ;
    animation-name: bounceOutUp ;
    -webkit-animation-duration: 1s;
    animation-duration: 1s;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    display: block;
    opacity: 0;
}
@-webkit-keyframes bounceInDown {
  0%, 60%, 75%, 90%, 100% {
    -webkit-transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
    transition-timing-function: cubic-bezier(0.215, 0.610, 0.355, 1.000);
  }
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

1
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

"JavaScript-less Bootstrap Modals"
Bootstrap 3.3.0 Snippet by mouse0270

Related: See More

Questions / Comments:

"JavaScript-less Bootstrap Modals" Bootstrap 3.3.0 Snippet by mouse0270

Related: See More

Questions / Comments:

"JavaScript-less Bootstrap Modals"
Bootstrap 3.3.0 Snippet by mouse0270