Different dimensions in modals

JavaScript
1

@PaulOB
This modal works great using either text or video embed code. However, it’s a fixed size.
Is there a way to determine the size of the modal for each modal content by placing the dimensions in the a href link or in the modal-content-1 hide class? So if I want a 400px x 400px for modal 1 and 400px X 600px in modal, etc… still have both to scroll if necessary.
Appreciate your help!

   <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-1 hide">
           Text here.....
          </div>
          <div class="modal-content-2 hide">
            Text here.....
          </div>
          <div class="modal-content-3 hide">
        <div class="iframe-wrap">
	Text or video embed code here.....
        </div>
        </div>
        </div>
        </div>
      </div>

<a href="#" data-open-modal data-modal="1">Click here</a>
window.onload = function () {
    var openModalLinks = Array.prototype.slice.call(document.querySelectorAll('[data-open-modal]'));
    var closeModal = document.querySelector('.modal-close');
    var modalOverlay = document.querySelector('.modal-overlay');
    var modalInner = document.querySelector('.modal-inner');
    var modalContent = document.querySelector('.modal-inner');
    var modalContent = Array.prototype.slice.call(document.querySelectorAll('div[class^="modal-content-"]'));

    var handleShowModal = function (id) {
        document.querySelector('body').classList.add('modal-visible');
        modalOverlay.classList.add('visible');
        modalOverlay.querySelector('.modal-content-' + id).classList.remove('hide');
        modalOverlay.querySelector('.modal-content-' + id).classList.add('isPlaying');
    }

    var handleHideModal = function (event) {
        modalOverlay.classList.remove('active');
    }

    var handleOpenModal = function (event) {
        var id = event.target.getAttribute('data-modal');

        event.preventDefault();
        modalOverlay.classList.add('active');

        window.setTimeout(handleShowModal(id));
    }

    var handleCloseModal = function (event) {
        if (event.target !== event.currentTarget) {
            return;
        }
        var el = document.querySelector('.isPlaying iframe');
        event.preventDefault();
        document.querySelector('body').classList.remove('modal-visible');
        if (el) {
            el.setAttribute("src", el.getAttribute("src"));
        }
        modalOverlay.classList.remove('visible');
        modalContent.forEach(function (modal) { modal.classList.add('hide'); modal.classList.remove('isPlaying') });

        modalOverlay.addEventListener(
            'transitionend',
            handleHideModal, {
                once: true,
                passive: true
            }
          );
    }

    openModalLinks.forEach(function (link) { link.addEventListener('click', handleOpenModal) });
    closeModal.addEventListener('click', handleCloseModal);
    modalInner.addEventListener('click', handleCloseModal);
}

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;
}
.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: 750px;
	max-width: 850px;
	max-height: 600px;
	overflow: auto;
	border: 1px solid;
	background: #fff;
	border-radius: 5px;
}
@media screen and (max-width:750px){
	.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;}
2

That doesn’t really make sense as the modal is a fluid size. It is not a fixed size as such. How can you determine what size several paragraphs of text will take up? And even if you did what would happen if the user zoomed the text?

If you fix it at 400px x 600px then it won’t scale and it won’t fit smaller screens and will also be wrong if someone adjusts their browser window. If you have the element at content width only then a line of text will eventually be 100% wide!

There is also an issue in that you cannot scale the iframe unless there is some percentage to base the padding-top-hack against. If you have the element at content width then you end up with zero width and height iframe.

Having fixed widths and heights seems like a step in the wrong direction to me and I don’t see how it could work across devices neatly. :slight_smile:

1 Like
3

Paul, thank you for that complete explanation and I totally understand and it does make sense to me. I appreciate it!

1 Like
4

@PaulOB Along similar thought as above… and with the same information in post #1:

I am having difficulty changing the size of the container for a different size video; let’s say, width = 400px and height = 600px. So this one is longer than wider and without scrolling unless longer than 600px.

I have made numerous attempts in trying to change modal container properties and am unable to get any combinations to work.

I would appreciate your suggestions on this.
Thanks!

5

The padding top in .iframe-wrap is the method that determines the aspect ratio between width and height. You adjust this percentage padding to match the aspect ratio of the video you want to embed.

You can do it by trial and error or you can work it out exactly mathematically.

1 Like
6

Thanks Paul. Thanks helps but not perfect. Should I be making adjustments to this too, which is in the modal-container?

width: 50%;
	min-width: 750px;
	max-width: 450px;
	max-height: 600px;
7

Seems to work fine with minor adjustments of width, height, and aspect ratio. Just a lot of trial and error.

By the way, I have looked at many other modals from my searches and yours is by far the BEST one out there!

I appreciate your help!

1 Like
8

Ideally the minimum and maximum settings should match the aspect ratio that you want to achieve.

For the padding you also have to do the math :slight_smile: (or trial and error until it looks right).

More info

1 Like
9

Very helpful information and the aspect ratio calculator does help.

So is it possible and how would you do one width/height/aspect ratio for modal #1 and then another width/height/aspect ratio for modal #2, etc. I am guessing there is a way to assign a class in the css and then mention that class in the html?

10

If you want different aspect ratios then you could set up different classes in the css but then of course your html would need the correct classes to be in place as required.

Youd probably need to do that serverside or with JS if you are dynamically changing things on the fly.

Generally it’s better to ensure your media is a standard aspect ratio to start with but of course sometimes this is out of your control.

1 Like
11

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.