Search
Other Modals questions
Forum

Make opening depend on screen size

Benno Baksteen's Avatar 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's Avatar Peter van Westen ADMIN
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's Avatar Benno Baksteen
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's Avatar Peter van Westen ADMIN
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's Avatar Benno Baksteen
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's Avatar Peter van Westen ADMIN
Should have been classname="...", not className="...".
I changed this in the documentation.
Please post a rating at the Joomla! Extensions Directory
Benno Baksteen's Avatar Benno Baksteen
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's Avatar Peter van Westen ADMIN
Happy you have a solution that works for you.
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