<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"> <a id="store" href="">Download Now</a> </div> </div> <!-- /.modal-content --> </div> <!-- /.modal-dialog --> </div> <!-- /.modal --> </div> </div>

.modal-body { text-align: center; } .btn { Position: absolute; top: -100px; }

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"); }