<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Centerd Window</title>
<style>
body {
transition:all 2s ease;
font-family: Calibri Light;
}
#msg {
position: fixed;
height: 60vh;
top: 20vh;
width: 1000px;
left: 50%;
margin-left: -500px;
background-image:linear-gradient( #DDD, #FFF,#DDD);
border-radius: 20px;
padding:0px 20px 10px 20px;
border:0.5px #666 solid;
box-shadow: 0px 0px 50px 10px #666;
font-size:24px;
transition:all 1s ease;
opacity:0; /* not seen */
}
#info {
width:97%;
height:52vh;
padding:10px;
background-color:#FFF;
overflow:auto;
border-radius: 10px;
}
#info_form, #info_form input, #info_form textarea {
font-size:18px;
}
#info_form textarea {
width:100%;
height:20vh;
}
#info_close {
position:absolute;
bottom:0px;
right:20px;
border:1px #F00 solid;
border-radius:8px;
background-color:#F8F8F8;
cursor:pointer;
box-shadow: 0px 0px 10px 5px #888;
}
@media only screen and (max-width : 1000px) {
#msg {
padding:0px;
height: 80vh;
top: 10vh;
margin-top:0px;
width: 97%;
left: 5px;
margin-left: 0px;
}
#info {
width:92%;
height:55vh;
}
}
</style>
<script>
msgon = 0; // flag of show status
// show hide the info window using opacity
function showhide()
{
el = document.getElementById("msg");
if (msgon == 0 )
{ el.style.opacity = "1"; msgon = 1; }
else
{ el.style.opacity = "0"; msgon = 0;}
}
</script>
</head>
<body>
<div align="center">
<h1>A centered window mobile friendly</h1>
<input name="Button1" type="button" value="Open the window on top" onclick="showhide()">
</div>
<div id="msg">
<br> <!-- space of info from the top of the window -->
<div id="info">
<br><br> <!-- The top of table inside the window -->
<form>
<table id="info_form" align="center">
<tr><td>Name</td><td><input name="t1" type="text" placeholder="Your name"></td></tr>
<tr><td colspan="2"> </td></tr>
<tr><td>Address</td><td><input name="t2" type="text" placeholder="Your address"></td></tr>
<tr><td colspan="2"> </td></tr>
<tr><td>Comments</td><td><textarea name="ta1" placeholder="Textarea"></textarea></td></tr>
<tr><td colspan="2"> </td></tr>
<tr><td colspan="2" style="text-align:center">
<input type="submit" value="Submit">
<input type="reset" value="Reset">
</td></tr>
</table>
</form>
</div>
<p id="info_close" onclick="showhide()"> Close </p>
</div>
</body>
</html>