Modal control the width

All great information that I will implement. Thank you for all your efforts and expertise, it’s greatly appreciated.

1 Like

Did you mean this or is this a typo - the vh?

Not sure if I understand the min and max values. If you have content that is 350px, why have a min and max. I suppose the max-height would deal with scrolling if you exceed 400px?

I am having issues with removing the video link and working with text.

I am using this, but when I click, the text is at the bottom of the container and then when you click the “X” to close, another window appears that you can’t close. Have to refresh the page to go away.

        <div class="modal-content-2 hide">
        <div class="iframe-wrap">
          <!--#INCLUDE FILE="page1.asp"-->


Also, removed the include and just have text and it doesn’t make any difference. The include is just the text that goes into the container.

I tried removing the iframe div to see if that would work - same result.

Thanks for your help.

Yes I did mean 90 vh as an example. Indeed your other max heights in pixels are nonsense because you don’t know the height of the users viewport and if a fixed position element goes below the fold you can’t scroll to it unless you have accounted for it in some way.

Generally a modal would be fluid hence the min and max widths to allow it to scale within a range. Why have a 320px modal on a screen that is 2500px wide?

Of course videos have a fixed aspect ratio so they would need something more complicated based on their aspect ratios.

That doesn’t happen in my example. I’d need to see what you have changed. The easiest way for me to help is if you fork my codepen and make your changes then show me the resulting codepen. :slight_smile:

I am adding a 4th to my example that I will use codepen. But when do I use “vh” instead of pixels because I noticed that you only used that on the last (3rd) in your example.

Yes, I just added the third as an example of what I would roughly do. :slight_smile:

But I am adding a 4th. do I do the same for the 4th too?

You will need to the same for the css and the js.


I removed the iframes as you said you weren’t using them.

1 Like

I was going to ask you that question, why? I am using a combination of text and youtube videos. I wasn’t sure if that is important or not.

Yesterday I did add to the CSS and JS the 4th. That’s easy to do. But since you changed it, I did a copy and paste and used the new one. I changed the sizes and all works good.

I even changed #2 to 90vh. Works good, but I am confused when to use pixels vs vh? It also seems that the max-width seems to control, so how to you use min-width in conjunction with max?

The only issue I have in functionality is that if you close the video it continue to play the audio. It that because there is no more iframe?


The original code was expecting a video in each section and would close the video on exit.

However you said you had deleted the video and the code crashed which is to be expected because the code was still looking for it.

If you are going to be using some modals as videos and some not have videos then the code will again need to be changed to accommodate that. The last version I posted was for text only and no videos.

It’s very hard for me to second guess what your requirements are which is why you have to be specific because solutions are tailored to exact requirements. :slight_smile:

If you want a mixture of both I’ll have to write another demo tomorrow.

Sorry for any confusion on my part, I always wanted to keep the video. Under the old code, I use both video and text - I just wanted to add another #4 text with a different size container. And you explained why that couldn’t happen which I am very clear as to why.

If you can do a demo on combination of both, which is ideal as it gives options, I would appreciate it.

For the demo, if you want to make $3 the video and the other text that would be fine. And the way you laid it out before, it’s easy to change in the CSS and JS.

Thank you again.

Here’s an example that can have videos or text.

You can add more or less elements by just changing the html and css but the js doesn;t need updating.

When you add a video you just need to add the has-video class which basically just removes the padding on the div.

The nav items have the data-modal attribute on each to identify the modal.

You made that very easy to change.

Very nicely done!

When I click on 1, 2, 3 several times and in different order, all is good. Once I click on #4 then the others change sizes and take on the width of #4.

Now I eliminated #5 (unused) from the html - does that make a difference?

.modal-size-4 .modal-container {
    min-width: 500px;
    max-width: 600px;
    <div class="modal-content-4 hide">
      <!--#INCLUDE FILE="modal4.asp"--> 

Also, I don’t have the modals in order on the html page - would that make a difference in that problem?


There was a logic problem this piece of code is updated : modal-size-" + (i+1).

    for (i = 0; i < openModalLinks.length; ++i) {
      modalOverlay.classList.remove("modal-size-" + (i+1));

The codepen above has been updated with that code.

I don’t think it will matter but it will make it harder to keep track of where you are if you have the numbers out of order. You will have to search through to find the highest number before you can add any more html

No the js is now independent as long as the html is sound.

All you have to do is number the nav link and the div accordingly.


<a href="#" data-modal="5">Text Modal #5</a>


<div class="modal-content-5 hide">

If you don’t add the extra css (modal-size-5 for example) then the size will default to the sizes in the original rule.

.modal-container {
  margin: 0 auto;
  width: 100%;
  min-width: 320px;
  max-width: 1250px;
  max-height: 90vh;
  overflow: auto;
  border: 1px solid;
  background: #fff;
  border-radius: 5px;

You only need to add rules for the ones that are different.

1 Like

I am using the updated codepen and still have that same issue. I cleared cache a couple of times and that didn’t help.

Hmm, I think I forgot to click save on the codepen.

Try it now.

1 Like

Yes, it works now. All very nice and intuitive the way you laid this out. I really appreciate it and wish I had your skill set - very impressive!

Is the video code just for YouTube videos?

I was messing around with storing the video on my server with this code. I changed the size in CSS and the video works but isn’t placed in the container very well and when you click out of it the audio still plays.

Perhaps I have some outdated or inadequate code for that. Would be interested in howing you would approach this:

    <script type="text/javascript">

        function vidplay() {
            var video = document.getElementById("Video1");
            var button = document.getElementById("play");
            if (video.paused) {
                button.textContent = "Pause - Restart once finished";
            } else {
                button.textContent = "Continue";

        function restart() {
            var video = document.getElementById("Video1");
            video.currentTime = 0;

        function skip(value) {
            var video = document.getElementById("Video1");
            video.currentTime += value;
      <video id="Video1" style=" width:640px;  height:480px;">

     <source src="../videos/videotutorial.mp4" type="video/mp4" />
     Your computer system or browser does not support this type of video.  Try using the most current Chrome browser.

EDIT: I was using the above to replace the YouTube video link.

It’s just for videos in iframes. If you want to add the native video tag then you will need to use another wrapper and target the video differently.

The css, js and html need to be changed accordingly. I have added a video into this demo so you can see the format for each.

1 Like

Very impressive again!

Couple of questions:

  1. I see that if you use a YT video, you set it up in the iframe, as in your #3.

  2. A regular mp4 you use the source tag. Would I just eliminate the .ogg scource tag if I am using mp4? Meaning you would never use both?

  3. Depending on the placement of the a href tags, I noticed on #2 (video) I could see the buttons ever so slightly in the background of the video. I was looking in the CSS to make that solid white, but I couldn’t find anything.

  4. #5 doesn’t have any reference in the CSS. Is it correct to assume it would then use the default modal size?

Thanks for allowing an option to use a non-YT video. Again, I appreciate your time and your knowledge in how to do this.

Yes iframes are different to the video tags so you need the different structure.

Yes if you just have mp4 then that’s all you need. I believe multiple formats are for older browsers support.

Do you mean the nav buttons at the top of the screen (text modal #1, text modal #2 etc.) ?

If so I just faded them down with opacity when the modal was open. The code is here:

.modal-visible .modal-selection {
  opacity: 0.2;

If you set it to zero they will be invisible.

Yes it will use the first original rule as a default. You only need to add code for any differences.

1 Like

Yes, thank you the code, I will make the appropriate change.

One last thing I can think of… If I don’t want to allow the option of downloading the video, is there a way to code that?