I have a modal, several on page.
How would I control or make the width different than the default of the others?
<div class="modal-content-4 hide;">
---- text ----
</div>I was thinking I could use an class=iframe-wrap but unsuccessful.
Appreciate your help.
Thank you
Can’t you just add an extra class and use that to change the width.
e.g. add modal-wide class here:
<div class="modal-content-4 modal-wide hide;">
---- text ----
</div>
.modal-wide{
width:80%; /* or whatever*/
}
You would need to have the same specificity as the original rules but as I am not privy to those I can’t show an exact example 
It also depends if you have styled other elements inside with a width or whether they take their basis from the parent.
When I do that, the modal maintains the same width as before, but the text in the div shrinks and moves to the left. If I use 20% (just for an example) it moves the text completely to the left of the modal.
You’ll have to give me an example as I would need to know what is controlling the width at the moment and whether the content inside is also controlled by its parent or on an individual basis.
Do you have a link or codepen available?
(I’m signing off soon so it may have to wait until tomorrow)
This is code that I got from you a while ago. Works good, just want to control width. Thanks
html {
box-sizing: border-box;
}
*, *:before, *:after {
box-sizing: inherit;
}
.modal-overlay {
position: fixed;
top:0;
left:0;
display: none;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .5);
opacity: 0;
transition: opacity .2s ease;
z-index: 2;
}
.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: 950px;
max-width: 950px;
max-height: 700px;
overflow: auto;
border: 1px solid;
background: #fff;
border-radius: 5px;
}
@media screen and (max-width:950px){
.modal-container{min-width:0;width:80%;}
}
.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;
}
.hide {
display: none;
}
p.open {
margin: 1em;
text-align: center;
font-size: 1em;
font-weight: 600;
color: #4c659b;
text-transform: uppercase;
font-family: Arial, Helvetica, sans-serif;
}
.modal-selection{
display:flex;
justify-content:space-between;
max-width:600px;
margin:auto;
}
.iframe-wrap{
width:100%;
position:relative;
padding-top:65%;
}
.modal-overlay iframe{
position:absolute;
left:0;
top:0;
right:0;
bottom:0;
width:100%;
height:100%;
}
@media print {
html,body{background:#fff!important;color:#000!important;}
body.modal-visible * {visibility:hidden!important;height:0;overflow:hidden;line-height:0;}
body.modal-visible .modal-overlay, body.modal-visible .modal-overlay * {visibility:visible!important;height:auto;overflow:visible;line-height:normal;}
.modal-overlay,.modal-inner,.modal-container {display:block;width:auto;height:auto;background:#fff;}
.modal-container{border:none;width:auto;height:auto;min-width:0;max-width:none;max-height:none;border-radius:0;overflow:visible}
.modal-header{display:none;}
.modal-overlay{position:absolute;top:0;}
}The width is controlled here in modal-container:
Add your new EXTRA class to that element similar to the one I posted earlier. Then define your new width including the min and max values also.
You will also need to do similar in the media query.
The new class should follow the original rule and modifies the widths as required.
I’m on a mobile at the moment so can’t offer code until tomorrow afternoon but you should be able to work it out now
Yes, I knew that 's where it was and I started experimenting with that.
I will continue as you suggest and let you know.
Nice of you to respond on your mobile, very appreciated.
Later, thanks
I tried this with same result where the container is still 950px.
<style>
.modal-wide{
width:60%;
max-width: 450px;
}
</style>Along with using this:
Thanks for your help.
Something like this:
.modal-container {
margin: 0 auto;
/*width: 50%; this is pointless*/
/*min-width: 950px; this is pointless*/
/*max-width: 950px; this is pointless*/
/* Because 950px is all you get */
width: 950px;
overflow: auto;
border: 1px solid;
background: #fff;
border-radius: 5px;
max-height: 100px;
}
.modal-container.newmodal {
/* change l to suit*/
width: 1250px;
}
@media screen and (max-width: 950px) {
.modal-container {
min-width: 0;
width: 80%;
}
.modal-container.newmodal {
width: 90%; /* change to suit*/
}
}
<div class="modal-container newmodal">
I tried all of that and all I get is out of portions with all my modals on the page.
I use the original code (post #5) for many modals of the same page and it’s difficult to change what I already have. Isn’t there a way that I can leave the original CSS code the same and just change the width property in the div of modal #4? Sounds like that would be a logical way of doing it, but what I am hearing from you is that your can’t. I like to label the modals numerically which makes it easier to identify. I believe I learned that from you a while ago.
I have the css in one file that is referenced from many pages and then do the modals on individual pages. That’s why it would be more practical to change that code on the individual page or have an over riding css of the individual page, leaving the modal css unchanged.
Isn’t that what you asked for?
I thought you wanted one modal a different size to the others? Are you talking about an inner element as I do not see a modal4 in the code you posted?
Throw it all in a codepen and I’ll be able to see better what you mean
The code I gave you is an override. You don’t need to change any of the original. Just use the code with the new classes as shown.
.modal-container.newmodal {
/* change to suit*/
width: 1250px;
}
@media screen and (max-width: 950px) {
.modal-container.newmodal {
width: 90%; /* change to suit*/
}
}
Okay, I have the new css style of the page, but I am doing something wrong.
<span style="background-color: #FFFF00; font-family:Arial, Helvetica, sans-serif; font-weight:800;"><a href="#" style="text-decoration:none !important;" data-open-modal data-modal="4" onclick="loadXMLDoc('first-element', '../menus/event.asp?id=19')"> READ THIS </a></span>Replaced with:
<span style="background-color: #FFFF00; font-family:Arial, Helvetica, sans-serif; font-weight:800;"><a href="#" style="text-decoration:none !important;" data-open-modal modal-container newmodal onclick="loadXMLDoc('first-element', '../menus/event.asp?id=19')"> READ THIS </a></span><div class="modal-content-4 hide">Replaced with:
<div class="modal-container newmodal">And when I open the other 2 modals on that page, the text in modal labled #4 show on the bottom of the modals of the others, so it’s not closing off because of an error I am coding it.
I am sure these are minor changes. But if I have 2 modals I was to change the width of, how would I had a 2nd one.
Thanks
What are these? modal-container newmodal
Are they new html attributes that you have invented?
I gave you classes:
<div class="modal-content-4 modal-wide hide">
You added attributes.
data-open-modal modal-container newmodal onclick="loadXMLDoc('first-element'
What’s that onclick doing in there? You want to keep the js in the js file where it belongs and not in the html. Also get rid of that inline styling as it makes it so hard to debug and see what’s going on.
You obviously have a lot more going on that what you have shown.
Please supply a codepen with a fully working example as you have too many things going on to guess what’s happening. Or post the full html, css and JS in here and I’ll build the codepen to test for you.
I can give you a codepen with multiple modals but it won’t really help if I don’t see what you are trying to do. I need to see a working example which shouldn’t be too difficult to mock up in codepen.
Changing the width of one of the modals should be a 5 second job so I think we may have got our wires crossed along the way and you have more things going on in your code than I can see.
I’ve a feeling that you don’t want a different sized modal but just a different sized div inside the modal. Again this should be straightforward to achieve so I think you have something else going on.
They came from you unless I misunderstood what you meant.
It’s always been there and it’s used for tracking clicks. I have them on all of the modals.
I have now done that and nothing seems to be changing on the one that I want a smaller width.
Honestly, I have added very little new other than what I got from you. The original code to your credit came from you and has been working fine. All I want to do it to make modal #4 a smaller width. And it doesn’t seem to be doing that.
Do you know the difference between an attribute and a class name?
I gave you classes but you added them as attributes.
<a href="#" data-open-modal modal-container newmodal onclick=""> READ THIS </a>
They should be classnames. e.g. class="modal-container newmodal"
<a href="#" class="modal-container newmodal" onclick=""> READ THIS </a>
However they shouldn’t have been added to that element. The new single class should have been added to the original modal-container class as shown in all my posts so far.
<div class="modal-container newmodal">
onclick is javascript and its bad practice to place it in your html. You should be using an eventListener from the js file. It’s a side issue to the current problem but just bad practice.
Here is an example of multiple modals and how to change the size on each in one simple over-ride.
I don’t think I can help any more than this without seeing all your code but the above is the basics for multiple modals.
Hope it helps
Perhaps I will leave well enough along, as this seems to be getting complicated I am just trying to alter the same code that I got from you a couple of years ago. It was using more than one modal to a page and also included iframe for videos. I works fine and the code I received from you was very appreciated as I have used in a lot. All I wanted to do is change the width in one of the containers as not all the text is the same. This would eliminate extra white space on the left and right of the centered text. I will look at this new codepen moving forward. Thank you for that.
Yes it is JS. I am only doing this per a previous post of a few years ago. It works fine. I don’t have your knowledge to respond to it not being in the html.
Thanks for your help and I will review your new codepen.
I’ll have a look back and see if I can find the original code. It may shed some light on the task
Here is the multiple video post in July 2019. As mentioned, it’s been working great and very useful to me which was very appreciated.
Ah ok that shows me the issue straight away.
You don’t have multiple modals you have one modal but with multiple contents.
It’s the modal container that controls the size for all of them so you can’t change one and not the others as they are all inside the same one container.
If you want one of the content sections a different size then you would need to use JS to add a class to the modal-container when it opens to act as a hook for the new size. I’ll try and work out a demo later.
Alternatively refactor the code into multiple containers with each having their own content only.
Based on that example you would need to add some js to add an extra class for the different sizes when the modal is clicked. I’ve added it to the code in that thread as a rough demo.
You then use those classes to change the width of the modal via css.
/* change size with added class */
.modal-size-1 .modal-container {
width: 100%;
min-width: 750px;
max-width: 850px;
max-height: 600px;
}
.modal-size-2 .modal-container {
width: 100%;
min-width: 350px;
max-width: 550px;
max-height: 400px;
}
.modal-size-3 .modal-container {
width: 100%;
min-width: 350px;
max-width: 1250px;
max-height: 90vh;
}
/* change the above for smaller screen to all be same size */
@media screen and (max-width: 750px) {
.modal-overlay .modal-container {
min-width: 0;
width: 80%;
}
}
There is a way to avoid all that and just use the css :has selector but it isn’t supported in Firefox yet but has quite good support. You wouldn’t need to change the js at all and you could do this instead.
/* instead of js for different sizes you could use this.*/
.modal-container:has(.modal-content-1:not(.hide)) {
width: 100%;
min-width: 750px;
max-width: 850px;
max-height: 600px;
}
.modal-container:has(.modal-content-2:not(.hide)) {
width: 100%;
min-width: 350px;
max-width: 550px;
max-height: 400px;
}
.modal-container:has(.modal-content-3:not(.hide)) {
width: 100%;
min-width: 350px;
max-width: 1250px;
max-height: 90vh;
}
/* Note: width in the above has to be 100% to stretch the table.*/
/* change the above for smaller screen to all be same size */
@media screen and (max-width: 750px) {
.modal-overlay .modal-container {
min-width: 0;
width: 80%;
}
}