"Download App Modal"
Bootstrap 3.3.0 Snippet by winniexu

Post to Facebook Tweet this

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">
<!-- Small modal -->
<a class="trigger" data-toggle="modal" data-target=".download-app"><img src="http://cdn.themetapicture.com/media/funny-small-white-puppy-dog.jpg"/>Small modal</a>
<!--<div class="modal fade download-app" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<a class="btn btn-default" data-dismiss="modal"><span class="glyphicon glyphicon-remove"></span></a>
<h4 class="modal-title" id="myModalLabel">Modal Heading</h4>
</div>
</div>
</div>
</div>-->
<div class="modal fade download-app" tabindex="-1" role="dialog">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<!--<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span aria-hidden="true">×</span>
<span class="sr-only">Close</span>
</button>
<h4 class="modal-title">Oops! This functionality is only available on the Whova mobile app.</h4>
</div>
<div class="modal-body">
<button type="button" class="btn btn-success" data-dismiss="modal">Download Now</button>
<img src="http://cdn.themetapicture.com/media/funny-small-white-puppy-dog.jpg"/>
</div>-->
<img src="http://cdn.themetapicture.com/media/funny-small-white-puppy-dog.jpg"/>
<div class="modal-body">
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
.modal-body {
text-align: center;
}
.btn {
Position: absolute;
top: -100px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
var operatingSystem, userAgentString = navigator.userAgent;
var link = $("#store");
if (userAgentString.indexOf("iPhone") > -1 || userAgentString.indexOf("iPod") > -1 || userAgentString.indexOf("iPad") > -1) {
operatingSystem = "iOS";
link.attr("href", "http://store.apple.com/us/browse/app");
} else if (/Android/.test(userAgentString)) {
operatingSystem = "Android";
link.attr("href", "https://play.google.com/store/apps?hl=en");
} else if (/Windows Phone/.test(userAgentString)) {
operatingSystem = "Windows Phone";
link.attr("href", "http://www.windowsphone.com/en-us/store");
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Dashboard
arrow key navigation thumbnail gallery modal view
Fancy subscribe modal (md, lg) with delay functionality on page load
Squarespace like modal

Questions / Comments: