"Slacker Style Modal"
Bootstrap 3.1.0 Snippet by escapedlion

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 ---------->
<!-- START OF HTML FOR DEMO - NOT NEEDED -->
<div class="container">
<div class="header">
<h3 class="text-muted">Project name</h3>
</div>
<div class="jumbotron">
<h1>Slacker Style Modal</h1>
<p class="lead">Every go to <a href="http://www.slacker.com/">Slacker Radio</a> and think that the modal they use is kidna nice? Wanted to mimic this feature? Now you can.</p>
<p>I tried to make this as easy as possible by making it so you only have to add a class, similar to how bootstap added <code>modal-lg</code> now there is <code>modal-slacker</code>. This means you still have access to bootstraps orginal modals!</p>
<p>Looks best in fullscreen mode. To view this snippet in fullscreen click on the button in the top right hand corner or if you are in fullscreen click on the same button to return to Bootsnipp!</p>
<p>
<button class="btn btn-lg btn-success" data-toggle="modal" data-target=".slacker-modal">Launch Slacker Style Modal</button>
<button class="btn btn-lg btn-info" data-toggle="modal" data-target=".bootstrap-modal">Launch Normal Bootstrap Modal</button>
</p>
</div>
<div class="row marketing">
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
</div>
<div class="col-lg-6">
<h4>Subheading</h4>
<p>Donec id elit non mi porta gravida at eget metus. Maecenas faucibus mollis interdum.</p>
<h4>Subheading</h4>
<p>Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cras mattis consectetur purus sit amet fermentum.</p>
<h4>Subheading</h4>
<p>Maecenas sed diam eget risus varius blandit sit amet non magna.</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
27
28
29
30
31
32
33
34
35
36
37
/* START OF DEMO CSS - NOT NEEDED */
#fullscreen {
position: fixed;
top: 10px;
right: 10px;
}
/* END OF DEMO CSS */
.modal-slacker {
width: 100%;
height: 100%;
margin: 0px;
}
.modal-slacker .modal-content {
margin-top: 5%;
border-radius: 0px;
border-left-width: 0px;
border-right-width: 0px;
height: 80%;
overflow: auto;
}
.modal-slacker .modal-header .close {
color: #fff;
background-color: #428bca;
border-color: #357ebd;
opacity: 1;
padding: 10px 17px;
font-size: 27px;
}
.modal-slacker .modal-title {
font-size: 34px;
font-weight: bold;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* START OF DEMO JS - NOT NEEDED */
$(function () {
if (window.location == window.parent.location) {
$('#fullscreen').html('<span class="glyphicon glyphicon-resize-small"></span>');
$('#fullscreen').attr('href', 'http://bootsnipp.com/mouse0270/snippets/rgNez');
$('#fullscreen').attr('title', 'Back To Bootsnipp');
}
$('#fullscreen').on('click', function(event) {
event.preventDefault();
window.parent.location = $('#fullscreen').attr('href');
});
$('#fullscreen').tooltip();
});
/* END DEMO OF JS - THAT IS RIGHT NO ADDITONAL JAVASCRIPT NEEDED FOR THIS SNIPPET */
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: