Make opening depend on screen size

Benno Baksteen

Would it be possible to open a modal only under a certain screen size and/or with a specific screen orientation?
I tried using a @media selector as a last item in my CSS to define a class:

@media (orientation: landscape) {
  div.hide {
    display: none;
  }
}

and then I added the class "hide" to the div the modal tags are in (on their own) but that doesn't seem to work.
I also tried this with a specific max-width and the selector screen only added.

Peter van Westen ADMIN

1 year 8 months ago

Peter van Westen ADMIN

1 year 8 months ago

Are you trying to hide the modal or the link that opens the modal?

For more info about how elements get their styling, you can use the Element Inspector of your browser.

Please post a rating at the Joomla! Extensions Directory

Benno Baksteen

1 year 8 months ago

Benno Baksteen

1 year 8 months ago

Trying to hide the modal, which is an on page load modal, no links, so just the modal tags. The modal works fine, but on every page load of course, and I would like to have it open only when the page loads on vertical phone screens. This is the code I have now:

<div class="hide">{modal html="Landscape orientation works best" title="Mobile phone?" open="true" auto-close="4000"}{/modal}</div>

and this is the relevant CSS I have now:

div.hide {
	background-color:#ffffff;
	text-align:center;
}

@media (orientation: landscape) {
  div.hide {
    display: none;
  }
}

Peter van Westen ADMIN

1 year 8 months ago

Peter van Westen ADMIN

1 year 8 months ago

You are placing the div around the link part of the modal.
The modal itself is outside the content area (last element in the <body>).

You could use the classname or other unique attributes given to the modal itself. Check the Element Inspector to see the HTML buildup of the actual modal container element.

If you only want to hide a specific modal, give that one a specific classname, and target that through CSS instead.
See here on how to give the modal a specific classname:
docs4.regularlabs.com/modals/getting-sta...n#all-tag-attributes

Please post a rating at the Joomla! Extensions Directory

Benno Baksteen

1 year 8 months ago

Benno Baksteen

1 year 8 months ago

Once again, thank you for your quick response!
Adding a class name was no problem, and the modal link text I put in for test purposes (as the modal link was not supposed to have text and was always invisible) then acted as wanted by appearing only on small screens. However the modal itself still opened on page load on any screen size. I tried adding a className too, but that did not work either.

So, I am afraid this is beyond my skill set, but by trying all of this I found a satisfactory solution to reach my goal (a warning appearing on small screens only) by adding a conditional div to the index.php

Although I couldn't use modals for this purpose, I still think it is a great extension! Thank you for your work.

Peter van Westen ADMIN

1 year 8 months ago

Peter van Westen ADMIN

1 year 8 months ago

Should have been classname="...", not className="...".
I changed this in the documentation.

Please post a rating at the Joomla! Extensions Directory

Benno Baksteen

1 year 8 months ago

Benno Baksteen

1 year 8 months ago

What's in a name 😉
This does work now, but I will stick with the other solution I found, because it is more subtle. So all in all I am happy that conditionally hiding the modal at first did not work, as otherwise I would probably not have found out about that option.

One remark though: both link text and modal are hidden at the larger screen sizes, per my CSS for "hide", however with that CSS (I used only .hide so not the div selector) the modal does start to open on page load for the larger screens too. Although it then immediately closes, before anything but the overlay is visible.

Peter van Westen ADMIN

1 year 8 months ago

Peter van Westen ADMIN

1 year 8 months ago

Happy you have a solution that works for you.

Please post a rating at the Joomla! Extensions Directory

Modals

M Modals