Skip to content

Instantly share code, notes, and snippets.

@stevester94

stevester94/gist:cdf943cfc42e9275c91765b2eb9f1409

Last active May 2, 2018 03:52
Show Gist options
  • Save stevester94/cdf943cfc42e9275c91765b2eb9f1409 to your computer and use it in GitHub Desktop.
Save stevester94/cdf943cfc42e9275c91765b2eb9f1409 to your computer and use it in GitHub Desktop.
Download ZIP
iframe_bullshit.html
Raw
gistfile1.html
<!doctype html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#overlay").click(function() { $("#overlay").hide(); });
$("#show-anchor").click(function() { $("#overlay").show(); });
});
</script>
<style type="text/css">
#overlay {
position: fixed; /* Sit on top of the page content */
width: 100%; /* Full width (cover the whole page) */
height: 100%; /* Full height (cover the whole page) */
text-align: center;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0,0,0,0.5); /* Black background with opacity */
z-index: 2; /* Specify a stack order in case you're using a different order for other elements */
}
#content {
width: 50%;
height: 96%;
/* bottom: 0;
top: 0;*/
margin-top: 2%;
margin-bottom: 2%;
display: inline-block;
z-index: 3;
background-color: white;
position: relative;
}
#xFrame {
width: 100%;
height: 100%;
}
#thebutton {
position: absolute;
margin-left: 20px;
top: 2%;
font-size: 2em;
}
</style>
<html lang="en">
<head> </head>
<body>
<div>
<button id="show-anchor">This has the actual page</a>
</div>
<div id="overlay">
<div id="content">
<iframe id="xFrame" src="http://athena.ecs.csus.edu/~mackeys/"></iframe>
</div>
<button id="thebutton" class="glyphicon glyphicon-remove"></button>
</div>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment