Hi javascript7,
When using the fiddle or codepen you just dump your raw code into their respective spots. Do not include the <script> tags, <style> tags or the doctype. Only the html between the <body> tag gets pasted in.
Actually I had been keeping up with your modal thread over in the JS forum so I was familiar with your code. I think what your using now is a version based off the code megapop posted at this fiddle.
I pulled the code out of your non-working fiddle and was able to run it from my machine. As Paul had mentioned earlier, your code rendered the same for me in all browsers too.
I do see a problem with it in all browsers though. When the content expands (it will if you add more text or remove that fixed width from the modal-content) it becomes inaccessible as it goes above the fold of the browser. That is due to the AP’d overlay being pinned down at all four corners with offset positions creating a fixed height.
You cannot scroll the modal-content back down, when you are able to scroll the window up due to the overflow that was created you’ll see that you lost the background color on the overlay.
Here is your code from the fiddle in the same state as when you posted it. I just added another line of text.
javascript7.html (3.6 KB)
Now to fix that problem is really simple, but it will introduce a flex bug in IE11. The fix would have been to set min-height: 100% on the AP overlay in place of the four pinned corners. If I remeber correctly the fix for IE was to pass the min-height up to the parent div. So it costs an extra div but I don’t think it would work in this scenario.
html, body {
box-sizing: border-box;
height: 100%; /* pass down for min-height*/
}
*, *:before, *:after {
box-sizing: inherit;
}
.modal-overlay {
display: none;
justify-content: center;
align-items: center; /*will not align in IE11 due to min-height flex bug*/
position: absolute;
top: 0; left: 0; right: 0;
/*bottom:0; remove this & use rule below*/
min-height: 100%; /*add this , but it introduces an IE11 flex bug*/
background-color: rgba(0, 0, 0, .5);
opacity: 0;
transition: opacity .2s ease;
}
Here is the flexbox page with those changes, it works in FF and Chrome but not in IE11.
flex-modal.html (4.1 KB)
If you need it to work in IE11 you can get the same results with display table, but it will need one extra div for the table-cell and vertical alignment.
The new div I added was called <div class="modal-inner">
I had to do a little workaround on your JS to get it to close when you click in the overlay area.
window.onload = function () {
var openModal = document.querySelector('[data-open-modal]')
var closeModal = document.querySelector('.modal-close')
var modalOverlay = document.querySelector('.modal-overlay')
var modalInner = document.querySelector('.modal-inner')
I had to add var modalInner and then used it to close with your ('click', handleCloseModal)
openModal.addEventListener('click', handleOpenModal)
closeModal.addEventListener('click', handleCloseModal)
modalInner.addEventListener('click', handleCloseModal)
Here is the page using that method with display-table working in all browsers. If we have misunderstood your original problem then you may need to clarify.
display-table-modal.html (3.8 KB)
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>display table - Modal Window</title>
<style>
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.modal-overlay {
position: absolute;
top:0; left:0;
display: none;
width: 100%;
height: 100%; /*treated as min-height in display table*/
background-color: rgba(0, 0, 0, .5);
opacity: 0;
transition: opacity .2s ease;
}
.modal-overlay.active {
display: table;
}
.modal-overlay.visible {
opacity: 1;
}
.modal-inner {
display: table-cell;
vertical-align: middle;
}
.modal-container {
margin: 0 auto;
width: 50%;
min-width: 200px;
max-width: 600px;
max-height: 600px;
overflow: auto;
border: 1px solid;
background: #fff;
border-radius: 5px;
}
.modal-header {
text-align: right;
}
.modal-close {
margin-right: .25em;
color: inherit;
text-decoration: none;
font-size: 2rem;
font-weight: bold;
}
.modal-content {
padding: 0 10px;
}
.modal-content p {
margin: 0 0 1em;
}
/*-- removed inline styles from p tag--*/
p.open {
margin: 1em;
text-align: center;
font-size: 1em;
font-weight: 600;
color: #4c659b;
text-transform: uppercase;
}
</style>
</head>
<body>
<p class="open"><a href="#" data-open-modal>Click For Information</a></p>
<div class="modal-overlay">
<div class="modal-inner">
<div class="modal-container">
<div class="modal-header">
<a href="#" class="modal-close">×</a>
</div>
<div class="modal-content">
<p>Lorem ipsum dolor sit amet consectetuer orci Donec consequat libero enim. Sed sit Curabitur nec risus ut platea convallis pretium fringilla dui.</p>
<p>Non Cras ut Vivamus Aenean semper Pellentesque mauris montes sem ac. Leo ac dictum vitae eget.</p>
<p>Orci magnis neque felis lorem et nibh auctor adipiscing Nam pellentesque. Eget dui laoreet neque ac habitant wisi consequat id non sem. Et semper Phasellus.</p>
</div>
</div>
</div>
</div>
<script>
window.onload = function () {
var openModal = document.querySelector('[data-open-modal]')
var closeModal = document.querySelector('.modal-close')
var modalOverlay = document.querySelector('.modal-overlay')
var modalInner = document.querySelector('.modal-inner')
var handleShowModal = function (event) {
modalOverlay.classList.add('visible')
}
var handleHideModal = function (event) {
modalOverlay.classList.remove('active')
}
var handleOpenModal = function (event) {
event.preventDefault()
modalOverlay.classList.add('active')
// Wait a tick to kickoff the animation
window.setTimeout(handleShowModal)
}
var handleCloseModal = function (event) {
if (event.target !== event.currentTarget) {
// Only hide the modal when clicking elements the handler
// got actually attached to, not others from which the
// event bubbles up to the target (e.g. the modal content)
return;
}
event.preventDefault()
modalOverlay.classList.remove('visible')
// Hide the modal when the fading out is finished
modalOverlay.addEventListener(
'transitionend',
handleHideModal, {
once: true,
passive: true
}
)
}
openModal.addEventListener('click', handleOpenModal)
closeModal.addEventListener('click', handleCloseModal)
modalInner.addEventListener('click', handleCloseModal)
}//]]>
</script>
</body>
</html>
