Skip to content

Instantly share code, notes, and snippets.

@ingdir

ingdir/gist:6245451

Last active December 21, 2015 03:49
Show Gist options
  • Save ingdir/6245451 to your computer and use it in GitHub Desktop.
Save ingdir/6245451 to your computer and use it in GitHub Desktop.
Download ZIP
flyout-2
Raw
gistfile1.html
<!DOCTYPE html>
<html>
<head>
<style>
.dm-blend {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom:0;
background-color: rgba(0, 0, 0, .25);
}
.dm-flyout {
width: 100%; /* without these, webkit gets confused */
height: 100%;
border-collapse: collapse;
table-layout: fixed; /* this is important to prodive div-like behavior */
}
.dm-flyout__td {
padding: 0;
text-align: center;
vertical-align: middle;
}
.dm-flyout__container {
position: relative;
display: inline-block;
min-width: 300px; /* minimal content width */
max-width: 75%; /* maximum width, you will get a scrollbar after this */
margin-top: 10px; /* size of the shadow blur */
margin-bottom: 100px; /* indentation to shift the block to top somehow*/
background-color: #fff;
box-shadow: 0 0 10px #000;
}
.dm-flyout__title {
-moz-box-sizing: border-box;
box-sizing: border-box;
width: -moz-calc(100% - 40px);
width: -webkit-calc(100% - 40px);
width: calc(100% - 40px);
height: 50px;
line-height: 50px;
text-align: left;
white-space: nowrap;
overflow: hidden;
}
.dm-flyout__content {
-moz-box-sizing: border-box;
box-sizing: border-box;
width: 100%;
height: -moz-calc(100% - 50px);
height: -webkit-calc(100% - 50px);
height: calc(100% - 50px);
min-height: 200px;
padding-right: 20px; /* scrollbar width */
text-align: left;
overflow: auto;
}
.dm-flyout__close {
font: normal 20px Arial, sans-serif;
position: absolute;
top: 5px;
right: 5px;
display: inline-block;
width: 32px;
height: 32px;
border-radius: 5px;
text-align: center;
line-height: 32px;
color: #000;
background-color: #fff;
cursor: pointer;
}
.dm-flyout__close:hover {
color: #d30408;
background-color: #f5f5f5;
}
@media screen and (min-width: 1200px) {
.dm-flyout__container {
max-width: 900px;
}
}
@media screen and (min-height: 750px) {
.dm-flyout__content {
max-height: 600px;
}
}
</style>
</head>
<body>
<div style="width: 100px; height: 10000px"></div>
<table class="dm-blend dm-flyout">
<tr>
<td class="dm-flyout__td">
<div class="dm-flyout__container">
<div class="dm-flyout__title">Hello</div>
<div class="dm-flyout__close">&times;</div>
<div class="dm-flyout__content">
<textarea style="margin: 20px; width: 100px; height: 100px;">hello</textarea>
</div>
</div>
</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment