Gist: https://gist.github.com/kuntoaji/8763949
<!-- HTML - index.html -->
<!DOCTYPE html>
<html>
<head>
<title>CSS jQuery Modal Overlay</title>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="main.js" type="text/javascript"></script>
<link href="main.css" media="all" rel="stylesheet" type="text/css">
</head>
<body>
<div id="overlay"></div>
<div id="modal">
<div id="content">
<p>Hello World!</p>
</div>
</div>
</body>
</html>
/* CSS - main.css */
#overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
z-index: 99;
}
#modal {
position: absolute;
background: rgba(0, 0, 0, 0.2);
border-radius: 14px;
padding: 8px;
z-index: 100;
text-align: center;
font-size: 18px;
}
#content {
border-radius: 8px;
background: #fff;
padding: 20px;
}
// Javascript - main.js
$(document).ready({
var top, left;
// hitung posisi saat on load.
top = Math.max($(window).height() - $("#modal").outerHeight(), 0) / 2;
left = Math.max($(window).width() - $("#modal").outerWidth(), 0) / 2;
$("#modal").css({
top: top + $(window).scrollTop(),
left: left + $(window).scrollLeft()
});
});
No comments:
Post a Comment