Skip to content

Instantly share code, notes, and snippets.

/index.html

Created February 3, 2017 05:04
Show Gist options
  • Save anonymous/bb713f26a8eaae2ed9ae35839cddade1 to your computer and use it in GitHub Desktop.
Save anonymous/bb713f26a8eaae2ed9ae35839cddade1 to your computer and use it in GitHub Desktop.
Download ZIP
Bootstrap 3 transparent and fullscreen modals Bootstrap 3 transparent and fullscreen modals // source http://jsbin.com/dinuzeh
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Bootstrap 3 transparent and fullscreen modals</title>
<meta name="description" content="Bootstrap 3 transparent and fullscreen modals">
<!-- include bootstrap -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<style id="jsbin-css">
body {
background: #72cffa;
}
/* .modal-transparent */
.modal-transparent {
background: transparent;
}
.modal-transparent .modal-content {
background: transparent;
}
.modal-backdrop.modal-backdrop-transparent {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-transparent.in {
opacity: .9;
filter: alpha(opacity=90);
}
/* .modal-fullscreen */
.modal-fullscreen {
background: transparent;
}
.modal-fullscreen .modal-content {
background: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.modal-backdrop.modal-backdrop-fullscreen {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
opacity: .97;
filter: alpha(opacity=97);
}
/* .modal-fullscreen size: we use Bootstrap media query breakpoints */
.modal-fullscreen .modal-dialog {
margin: 0;
margin-right: auto;
margin-left: auto;
width: 100%;
}
@media (min-width: 768px) {
.modal-fullscreen .modal-dialog {
width: 750px;
}
}
@media (min-width: 992px) {
.modal-fullscreen .modal-dialog {
width: 970px;
}
}
@media (min-width: 1200px) {
.modal-fullscreen .modal-dialog {
width: 1170px;
}
}
/* centering styles for jsbin */
html,
body {
width:100%;
height:100%;
}
html {
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
body > .btn {
display: block;
margin: 0 auto;
}
</style>
</head>
<body>
<!-- Button modal transparent -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-transparent">
Launch modal transparent
</button>
<!-- Modal transparent -->
<div class="modal modal-transparent fade" id="modal-transparent" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<br>
<!-- Button modal fullscreen -->
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#modal-fullscreen">
Launch modal fullscreen
</button>
<!-- Modal fullscreen -->
<div class="modal modal-fullscreen fade" id="modal-fullscreen" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- include jQuery -->
<script src="https://code.jquery.com/jquery-1.10.2.min.js"></script>
<!-- include bootstrap -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script id="jsbin-javascript">
// .modal-backdrop classes
$(".modal-transparent").on('show.bs.modal', function () {
setTimeout( function() {
$(".modal-backdrop").addClass("modal-backdrop-transparent");
}, 0);
});
$(".modal-transparent").on('hidden.bs.modal', function () {
$(".modal-backdrop").addClass("modal-backdrop-transparent");
});
$(".modal-fullscreen").on('show.bs.modal', function () {
setTimeout( function() {
$(".modal-backdrop").addClass("modal-backdrop-fullscreen");
}, 0);
});
$(".modal-fullscreen").on('hidden.bs.modal', function () {
$(".modal-backdrop").addClass("modal-backdrop-fullscreen");
});
</script>
<script id="jsbin-source-css" type="text/css">
body {
background: #72cffa;
}
/* .modal-transparent */
.modal-transparent {
background: transparent;
}
.modal-transparent .modal-content {
background: transparent;
}
.modal-backdrop.modal-backdrop-transparent {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-transparent.in {
opacity: .9;
filter: alpha(opacity=90);
}
/* .modal-fullscreen */
.modal-fullscreen {
background: transparent;
}
.modal-fullscreen .modal-content {
background: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.modal-backdrop.modal-backdrop-fullscreen {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
opacity: .97;
filter: alpha(opacity=97);
}
/* .modal-fullscreen size: we use Bootstrap media query breakpoints */
.modal-fullscreen .modal-dialog {
margin: 0;
margin-right: auto;
margin-left: auto;
width: 100%;
}
@media (min-width: 768px) {
.modal-fullscreen .modal-dialog {
width: 750px;
}
}
@media (min-width: 992px) {
.modal-fullscreen .modal-dialog {
width: 970px;
}
}
@media (min-width: 1200px) {
.modal-fullscreen .modal-dialog {
width: 1170px;
}
}
/* centering styles for jsbin */
html,
body {
width:100%;
height:100%;
}
html {
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
body > .btn {
display: block;
margin: 0 auto;
}</script>
<script id="jsbin-source-javascript" type="text/javascript">// .modal-backdrop classes
$(".modal-transparent").on('show.bs.modal', function () {
setTimeout( function() {
$(".modal-backdrop").addClass("modal-backdrop-transparent");
}, 0);
});
$(".modal-transparent").on('hidden.bs.modal', function () {
$(".modal-backdrop").addClass("modal-backdrop-transparent");
});
$(".modal-fullscreen").on('show.bs.modal', function () {
setTimeout( function() {
$(".modal-backdrop").addClass("modal-backdrop-fullscreen");
}, 0);
});
$(".modal-fullscreen").on('hidden.bs.modal', function () {
$(".modal-backdrop").addClass("modal-backdrop-fullscreen");
});
</script></body>
</html>
Raw
jsbin.dinuzeh.css
body {
background: #72cffa;
}
/* .modal-transparent */
.modal-transparent {
background: transparent;
}
.modal-transparent .modal-content {
background: transparent;
}
.modal-backdrop.modal-backdrop-transparent {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-transparent.in {
opacity: .9;
filter: alpha(opacity=90);
}
/* .modal-fullscreen */
.modal-fullscreen {
background: transparent;
}
.modal-fullscreen .modal-content {
background: transparent;
border: 0;
-webkit-box-shadow: none;
box-shadow: none;
}
.modal-backdrop.modal-backdrop-fullscreen {
background: #ffffff;
}
.modal-backdrop.modal-backdrop-fullscreen.in {
opacity: .97;
filter: alpha(opacity=97);
}
/* .modal-fullscreen size: we use Bootstrap media query breakpoints */
.modal-fullscreen .modal-dialog {
margin: 0;
margin-right: auto;
margin-left: auto;
width: 100%;
}
@media (min-width: 768px) {
.modal-fullscreen .modal-dialog {
width: 750px;
}
}
@media (min-width: 992px) {
.modal-fullscreen .modal-dialog {
width: 970px;
}
}
@media (min-width: 1200px) {
.modal-fullscreen .modal-dialog {
width: 1170px;
}
}
/* centering styles for jsbin */
html,
body {
width:100%;
height:100%;
}
html {
display:table;
}
body {
display:table-cell;
vertical-align:middle;
}
body > .btn {
display: block;
margin: 0 auto;
}
Raw
jsbin.dinuzeh.js
// .modal-backdrop classes
$(".modal-transparent").on('show.bs.modal', function () {
setTimeout( function() {
$(".modal-backdrop").addClass("modal-backdrop-transparent");
}, 0);
});
$(".modal-transparent").on('hidden.bs.modal', function () {
$(".modal-backdrop").addClass("modal-backdrop-transparent");
});
$(".modal-fullscreen").on('show.bs.modal', function () {
setTimeout( function() {
$(".modal-backdrop").addClass("modal-backdrop-fullscreen");
}, 0);
});
$(".modal-fullscreen").on('hidden.bs.modal', function () {
$(".modal-backdrop").addClass("modal-backdrop-fullscreen");
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment