Modals

Change modal width when displaying on mobile

Peter Tuson

Hello Peter,

I had a problem with displaying a form using a modal. For the desktop, I set the width to be 50% for the best display. However this didn't work when displaying on a mobile phone. I discovered that I could add js code to change the width to 100% for thin screens, this is the code:

jQuery(document).ready(function () {
    if (window.screen.width < 480) {
        const modal = document.getElementsByClassName('modal_link');
        if (modal) {
            for (let i = 0; i < modal.length; i++) {
                if (modal[i].getAttribute('data-modal-inner-width')) {
                    modal[i].setAttribute('data-modal-inner-width', "100%");
                }
            }  
        }      
    }
});

The modal code is:

<p>{modalcontent eluceo_news}{module Eluceo Newsletter}{/modalcontent}</p>
<div>{modal content="eluceo_news" width="50%"}
<div class="card" style="width: 80%; display: block; margin-left: auto; margin-right: auto; margin-bottom: 0.7rem;">{source}&lt;?php echo file_get_contents('images/iShine/newsletter_regular.svg');?&gt;{/source}</div>
<p style="color: white; text-align: center;">Stay on top of your working life with the Eluceo Newsletter.</p>
{/modal}

I hope this helps unless you have a better way of doing it?

Regards,

Peter.

Peter van Westen ADMIN

2 years 7 months ago

Peter van Westen ADMIN

2 years 7 months ago

yup, nice work.

Please post a rating at the Joomla! Extensions Directory

You can only post on the extension support forum if you have an active subscription and you log in

Buy a Pro subscription

Modals

Change modal width when displaying on mobile

M Modals