When I trigger a popup that dynamically generates a fixed background with a centered dialog, it works well. However, on smaller monitors like laptops, tablets, and phones, the content can overflow beyond the visible area due to its fixed container, making it inaccessible. This issue is most pronounced on smaller Android devices because when the form input in the popup is triggered, it causes the Android keypad to cut the screen real estate in half.
I have attempted several solutions, such as setting a maximum height on the dialog and setting overflow-y to scroll, but this cuts off the full popup on monitors where it fits correctly, negatively impacting the aesthetics.
Are there any simple solutions that I might be overlooking? I am open to implementing CSS or jQuery fixes.
JSfiddle:http://jsfiddle.net/L77v4caL/9/
Video of the problem: https://youtu.be/LW9EeMVarcM (unable to scroll to the bottom of the popup, it simply gets cut off.)
Full HTML:
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>test</title>
<link rel="stylesheet" type="text/css" href="css/styles.css"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script>
$( document ).ready(function() {
/* If button is clicked create dialog */
$('.button').click(function () {
/* Create background */
$('body').prepend('<div id="dialog-bg"></div>');
/* Create popup & form */
$('#dialog-bg').append('<div class="dialog"><h2>Popup banner</h2><div class="large-content">This could be a large form or an iFrame to a youtube video<form><input name="email" placeholder="Form example" required=""></form></div></div>').hide().fadeIn(500);
/* Create close button */
$('.dialog').prepend('<div class="close-dialog"><a class="close" href="/">x</a></div>');
/* Remove default link behaviour from close button */
$('a.close').click(function () {
return false;
});
/* Close all on click */
$('.close, .close-dialog').click(function () {
$('#dialog-bg, .dialog, .close-dialog .close').remove();
});
});
});
</script>
<style>
#dialog-bg {
top: 0;
z-index: 1;
width: 100%;
height: 100%;
position: fixed;
background: url(https://dl.dropboxusercontent.com/u/12645552/overlay.png) 0 0 repeat;
}
.dialog {
width: 350px;
padding: 20px;
position: relative;
margin: 50px auto 0;
background-color: #fff;
}
.large-content {
color: #fff;
height: 300px;
padding: 20px;
background-color: #000;
}
.close-dialog {
z-index: 1;
width: 28px;
height: 28px;
right: 15px;
top: 15px;
cursor: pointer;
text-align: center;
border-radius: 50%;
position: absolute;
background-color: #fff;
-webkit-box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.6);
box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.6);
}
a.close {
color: #000;
font-size: 1.3em;
line-height: 1.2;
font-family: arial;
text-decoration: none;
}
.button {
color: #fff;
padding: 10px;
cursor: pointer;
text-align: center;
background-color: #2599ca;
}
.button:hover {
text-decoration: underline;
}
</style>
</head>
<body>
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus eleifend felis at aliquet rhoncus. Nunc gravida in augue et rhoncus. Nam leo ex, pretium a neque eu, accumsan efficitur ligula. Mauris sodales nulla at orci pharetra vehicula. Vivamus quis odio at mi venenatis varius. Proin nec tristique odio. Donec dictum suscipit odio et rutrum. Quisque rutrum vestibulum diam, sit amet porttitor nulla volutpat ut. Fusce mattis enim eget pulvinar congue. Nunc euismod sapien ut blandit egestas. Integer in tempor est. In quis enim at quam ornare maximus ac eget mauris.</p>
<p>Maecenas quis mollis nulla. Suspendisse quis bibendum dolor, quis tempor elit. Morbi dolor ante, dignissim eu orci in, pretium sagittis massa. Nullam tincidunt tortor vel bibendum feugiat. Quisque a dolor nec ante imperdiet ullamcorper. Fusce ac risus congue, gravida ex sed, mattis erat. Suspendisse potenti. Aenean ullamcorper nisl eu interdum egestas. Donec a porta justo. Maecenas dapibus lacus non odio iaculis mollis. Integer a cursus magna. Vestibulum sollicitudin, urna nec consequat convallis, dui dolor lacinia enim, sit amet mattis diam nunc non justo. Aenean finibus, nisi vel feugiat venenatis, magna nisl lobortis massa, sed vestibulum tellus ex ac tellus. Etiam a risus facilisis, congue ex vel, pretium ipsum. Suspendisse eget sapien nisi. Sed rhoncus tortor ut velit volutpat feugiat.</p>
<p>Praesent consequat justo quis magna ultrices fringilla. Nam ullamcorper sit amet massa nec finibus. Sed enim neque, dictum ullamcorper accumsan a, fringilla quis turpis. Nam et consequat tellus. In nibh lectus, malesuada congue tortor sed, aliquam fringilla enim. Sed euismod nisi et lectus rhoncus, nec pharetra tortor pulvinar. Cras pretium ullamcorper lorem nec fringilla.</p>
<p>Mauris venenatis sem nibh, in fringilla enim tempus quis. Nullam et tellus pretium, dictum nunc vel, venenatis ipsum. Pellentesque congue libero ac lobortis maximus. Nam tincidunt euismod facilisis. Cras volutpat, augue vitae consectetur tempor, libero augue placerat nunc, eu placerat ex lacus nec nulla. Pellentesque nisl nisi, tempus ac scelerisque in, vestibulum in libero. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
<p>Nam elementum lectus est, id porttitor magna tempor id. Ut metus orci, sagittis sagittis venenatis sit amet, pulvinar eu eros. Suspendisse sed gravida purus. In tincidunt urna elit. Maecenas at malesuada nisl. Donec ut congue risus. Etiam volutpat efficitur facilisis. Donec tellus nibh, sodales vel gravida ut, ullamcorper quis sapien. Aliquam erat volutpat. Donec ultrices mauris at pulvinar tempus. Donec pretium, lectus vel laoreet feugiat, felis sapien dapibus augue, at pellentesque diam lorem dapibus ipsum. Nulla sit amet mattis ante, sit amet vestibulum nisi.</p>
<div class="button">Click me</div>
</body>
</html>