Modal background


    .modal-overlay {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .2s ease;
}

.modal-overlay.active {
  display: flex;
}

.modal-overlay.visible {
  opacity: 1;
}

.modal-container {
  flex-basis: 50%;
  padding: 1rem;
  background-color: #fff;
  border-radius: 3px;
}

.modal-header {
  display: flex;
  font-weight: bold;
}

.modal-close {
  margin-left: auto;
  color: inherit;
  text-decoration: none;
  margin-top: -.5rem;
  font-size: 2rem;
}

.modal-content {
  max-height: 600px;
  overflow: auto;
  padding:20px
}

When I use this in IE 11 only (not Chrome, FF or Edge) the white background shrinks as you make the window smaller. So the content extends beyond the white background and looks funny.

Do you think there is a fix for that?

Thank you

I expect so. What is the HTML which goes with that CSS?

<div class="modal-overlay">
  <div class="modal-container">
    <div class="modal-header">
      <a href="#" class="modal-close">&times;</a>
    </div>
    <div class="modal-content" style="width:600px;">
    ----content here---</div>
  </div>
</div>

The snippets posted are impressively valid .

Do you suppose you could construct a working page that demonstrates the issue? As it is, it shows nothing.

Here’s the start…

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="css/stylesheet.css">
    <title>modal background</title>
<!--
https://www.sitepoint.com/community/t/modal-background/295753/3
javascript7
Apr 29,2018 6:42 PM
-->
    <style>
.modal-overlay {
  display: none;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: rgba(0, 0, 0, .5);
  opacity: 0;
  transition: opacity .2s ease;
}
.modal-overlay.active {
  display: flex;
}
.modal-overlay.visible {
  opacity: 1;
}
.modal-container {
  flex-basis: 50%;
  padding: 1rem;
  background-color: #fff;
  border-radius: 3px;
}
.modal-header {
  display: flex;
  font-weight: bold;
}
.modal-close {
  margin-left: auto;
  color: inherit;
  text-decoration: none;
  margin-top: -.5rem;
  font-size: 2rem;
}
.modal-content {
  max-height: 600px;
  overflow: auto;
  padding:20px
}
    </style>
</head>
<body>

<div class="modal-overlay">
  <div class="modal-container">
    <div class="modal-header">
      <a href="#" class="modal-close">&times;</a>
    </div>
    <div class="modal-content" style="width:600px;">
    ----content here---
    </div>
  </div>
</div>

</body>
</html>

Copy the above code to a new HTML page. It should demonstrate the issue so anyone can see it and thereby troubleshoot it.

Even making the modal visible shows similar behaviour in IE11 and Chrome so the issue can’t be diagnosed from the above code yet.:slight_smile:

1 Like

I created an account with jsfiddle and am copying code into the html and css but I can’t seem to figure out how to save it and created a link. The instruction are rather poor on how to do that and this is my first time I have done that. What am I missing to create that. Thanks

I created an account at jsfiddle and apparently I didn’t need to because there were no controls that I saw.

But here is the link. Nothing seems to be right there or I am not using it correctly.

https://jsfiddle.net/7hLxqgn5/2/

Maybe you can make some sense of it. Like I said. It works in all browsers except for IE 11 but what is on jsfiddle isn’t making any sense to me.

Thank you

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">&times;</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>
4 Likes

First of all, thank you for taking the time to help and with your detailed explanation. I very much appreciate it.

I used the last bit of html, css and js code and it works perfectly!!

2 questions, as I was trying to make a chance in the css, but unsuccessful.

  1. If I want to remove the line box around the text, what do I change?
  2. If I want the entire screen to be grayed, what would I change?

These are minor issues and not essential if it’s not an easy fix.

Again, thank you so much. I wish I could hit the like a hundred times!!

1 Like

If your asking how to remove the white background and black border around the text those rules are found here.

.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;*/
}

The changes above should take care of that.

Only problem now though is that the close “X” and/or the modal content can layer above the “Click For Information” link text. The background color helps hide that [data-open-modal] text.

If you were to remove this portion of html you will see what I’m talking about.

      <div class="modal-header">
        <a href="#" class="modal-close">&times;</a>
      </div>

I would give the .modal-container a background color to match the overlay opaque state.

.modal-container {
  margin: 0 auto;
  width: 50%;
  min-width: 200px;
  max-width: 600px;
  max-height: 600px;
  overflow: auto;
  /*border: 1px solid;*/
  background-color: #7f7f7f;
  /*border-radius: 5px;*/
}

Which will still cause it to layer over content that is below it, and give you this…

Hope that helps :slight_smile:

Perhaps I wasn’t clear. I want the white background but would like if possible to remove only the border around the text. I couldn’t get any combinations to work.

And then, if it’s possible to have the grayed part cover the entire page rather than a partial page.

Thanks

In that case just remove the border rule only.

I was using CSS comments /* – */ to make the browser ignore the rules I thought you didn’t want.

/*anything in this comment gets ignored*/

To remove any rules you don’t want just delete that line. Then remove any comments that are blocking the rules you want.


.modal-container {
  margin: 0 auto;
  width: 50%;
  min-width: 200px;
  max-width: 600px;
  max-height: 600px;
  overflow: auto;
  /*border: 1px solid; delete this line*/
  background: #fff;
  border-radius: 5px;
}

I think this is where your losing me, as far as I can tell the entire page is grayed out, except for the white background you want under the text.

You may want to edit your fiddle with your current code so I can see this partial page your describing.

I have tried that (although I deleted it) but now know to just comment it out - but I still get the line box surrounding the text.

As far as the “gray” portion under the content box, it goes about half page and the rest of the page is not darkened out as you scroll beyond the content of the modal.

I get the impression that something has changed with your CSS or HTML.

As I mentioned in my last post, please update your fiddle, or post the CSS + HTML of the problem page in your next post.

If your JS has not changed, then no need to post it as we already have it.

EDIT:
Make sure your Rulesets are set up properly. If you are missing a semi-colon after any values the browser will stop processing right there. Any property/value sets after that would be ignored.

Until you get a firm grasp on CSS you can use the W3C validator to help point out any errors

First of all I found why I wasn’t able to use jsfiddle the first time. It doesn’t work in IE 11.
Here it is…

https://jsfiddle.net/7a27scop/

When I run it there I get nothing. Again, after the modal runs with the content, regardless of the length of the text because I tried several lengths, the gray under the content box is about an inch or so and then you see the rest of the page after that.

Well that would explain it :slight_smile:

Ok, for starters that fiddle has an error right here…

<p class="open"><a href="#" data-open-moda">CLICK HERE</a></p>

Notice the L missing in modal and then remove the stray quotation mark

<p class="open"><a href="#" data-open-modal>CLICK HERE</a></p>

That should get it working so you can explain your previous problems.

EDIT:
BTW, Is IE11 your default browser?
If you have FF or Chrome, use them along with IE11, then tell us which browser your page is not working in.

Sorry, that was my fat finger in the process of putting it on jsfiddle;

This is what I have:

<p class="open"><a href="#" data-open-modal>CLICK HERE</a></p>

And it still is doing the same thing. I had it correct on my page just messed up with jsfiddle.

That’s just it, I’ve yet to see what you are describing. I think you need to post a screenshot of what your seeing.

Do you have some additional html after the modal that your referring to as “the rest of the page”? Or are you just seeing the white background of the html element?


The only difference I see in the code at the last fiddle, is a change in the min/max widths.

That min-width is causing a horizontal scrollbar for me now when window width is reduced.

Your border is still there, so that explains why your still seeing it.

.modal-container {
  margin: 0 auto;
  width: 50%;
  min-width: 750px;
  max-width: 850px;
  max-height: 600px;
  overflow: auto;
  border: 1px solid;
  background: #fff;
  border-radius: 5px;
}

Here is the code from your last fiddle with background:fff; added to the html element.
It’s working fine for me.

javascript7-2.html (3.6 KB)

  1. Run that page and post a screenshot of what your seeing
  2. Tell me what browser your using, or if it happens in all your browsers

It happens on all browsers the same.

I striped line by line code after the modal link, saved it, looked at it, then the next bit of code, same result until the bottom of the page.

I then took out all of the code after the modal link and replaced it with simple paragraph tags, Here’s the result:

So I will continue to look at what is wrong, but for now if you could let me know the lines in css to comment out the grayed area, I might just use it that way. It still gives me the white background with the closing “X” and hopefully still being able to click outside the box to close.

If I can make any light out of it, I will let you know. Again, I want to thank you for your assistance, it’s truly appreciated.

PS…and the line box around the text if that is possible, thanks

Your screenshot explains it to me. If you look back I had asked if there was any other content on your page. Obviously there is. :slight_smile:

Most modal windows use position:fixed to attach to the viewport. That’s what you will need to do to keep other content in the page from scrolling the modal away. But you must be careful to limit the modals content now, once the .modal-container gets clipped or slides under the viewport there is no scrolling back to it.

So having said that, change your positioning to fixed…


.modal-overlay {
  position: fixed;
  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;
}

But keep the modal text to a minimum. If you place images in there they can be set up to scale down with the viewport and that will require some adjustments to your min/max widths on .modal-container