Skip to content

Instantly share code, notes, and snippets.

@Papillard

Papillard/app.css

Last active August 29, 2015 14:09
Show Gist options
  • Save Papillard/3fc50abc98c2a5f1cc00 to your computer and use it in GitHub Desktop.
Save Papillard/3fc50abc98c2a5f1cc00 to your computer and use it in GitHub Desktop.
Download ZIP
Modal challenge @lewagon
Raw
app.css
body{
background: #cccccc;
}
#background{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, 0.8);
display: none;
}
#modal-img {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
max-width: 600px;
}
Raw
app.js
$(document).ready(function(){
$("img").on("click", function(event){
// Show dark background
$("#background").show();
// Get source of clicked image
var source = $(this).attr("src");
// Get modal width specified in HTML
var modalWidth = $(this).data("modal-width");
// Build image to insert in the body
var image = $("<img>").attr("src", source).attr("id", "modal-img");
// Set its width
image.css({"width": modalWidth});
// Insert built image
$("body").append(image);
});
$("#background").on("click", function(event){
$(this).hide();
$("#modal-img").remove();
});
});
Raw
modal.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>--- TODO ---</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css">
<link rel="stylesheet" href="app.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- Leave those next 4 lines if you care about users using IE8 -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<img src="http://spinnakr.com/blog/wp-content/uploads/2013/02/Original-Octocat.jpg" data-modal-width="300px" width="200px">
<img src="https://octodex.github.com/images/octocat-de-los-muertos.jpg" data-modal-width="300px" width="200px">
<div id="background"></div>
<!-- Including Bootstrap JS (with its jQuery dependency) so that dynamic components work -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script src="app.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment