PopupMessages Atom - Freebie by MrT
-
-
- MICHAEL KOONTZ
- Rocketeer
- Posts: 89
- Thanks: 9
-
Thank you! If I'm able to do something with it I will, however this is out of my wheelhouse and I have run up against a brick wall which is why I was asking for help.
The only thing I can see that is different, is that when you successfully send a message, the page reloads and there is a new ID added under the #system-message-container, it's #system-message.
I can however suggest that z-index: 1000; be added to the .g-system-messages.messages-loaded class. I have a few sites where a few items have a z-index of 1, 3, or even 980. So by adding a value of 1000 or greater ensures that it will cover other items on the page.
Hopefully someone else will have the time to investigate and figure out what is needed in order to get this to show the "Thank you for your email." message after an email is sent using the contact form.
regards,
Michael
-
-
-
- MICHAEL KOONTZ
- Rocketeer
- Posts: 89
- Thanks: 9
-
I spoke with Andreas Kar (thex) about this and he made some extensive modifications to the twig file.
It now shows the Modal window on page reload after a message is successfully sent using the contact form.
Also, this fix solved the issue I asked about in my previous post regarding J2Store and the Modal window after clearing the cart.
In the scss file we addedThis was done to suppress the system message from loading on the page first then switching to the modal popup..g-system-messages { display: none; }
UnderI added the.g-system-messages.messages-loaded
This was done to ensure it sits on top of other items on the page in case something else has a z-index added. This should be adjusted to a number higher than 1000 to suit the needs of each individual site, if necessary.z-index: 1000;
Last but not least, underwe added.alert .close:hover
This was done because the 'X' to close the modal window was getting underlined.text-decoration: none;
Thank you again to all who have contributed to this!
-
-
-
- MrT
- Preeminent Rocketeer
- Posts: 101084
- Thanks: 13481
- Web Designer/Developer
-
MICHAEL KOONTZ - Thank you for that but you've only documented a few minor CSS changes there, two of which are probably related to the template that you are using and may well not be relevant to other templates. What you didn't say is that substantial changes have also been made to my jQuery and it is these changes that are giving you the functionality you required (not really the SCSS changes).
I do appreciate your contribution though, thanks again.
Regards, Mark. - Please search forums before posting. Please make sure your post includes the version of the CMS you are using and a link to the problem. Annotations on screenshots can also be helpful to explain problems/goals. Please use the "secure" tab for confidential information.
-
-
-
- MICHAEL KOONTZ
- Rocketeer
- Posts: 89
- Thanks: 9
-
Hello MrT,
You are welcome and I hope the changes help others.
About the "jquery" changes, actually, you just missed it as I did mention it. While I did not specifically outline each individual change in the TWIG file or mention "jquery" specifically, I did say this in my first sentence which speaks to those "jquery changes".
MICHAEL KOONTZ wrote:I spoke with Andreas Kar (thex) about this and he made some extensive modifications to the TWIG file.
Regarding the CSS changes. I do not believe any of them are "template" specific. Joomla specific, maybe, but not template specific.
The z-index attribute is a good idea no matter what since some templates may already have a z-index attribute and it is highly likely that some designers may add a z-index attribute. Without this added, even if an element only has a z-index attribute of 1, that element will sit above the overlay. This simply ensures the overlay will sit on top of any elements in other templates that may have a z-index attribute on elements and also makes it less likely that designers will have to modify the scss.
Adding the style attribute of text-decoration: none; is necessary, at least for Joomla, because that is coming from /templates/template-name/scss/template-name-joomla/_utilities.scss which seems to be standard in most templates that I have worked with from Rocket Theme so this ensures the closing X won't be underlined.
I'll note that the "underline" issue only happens on the page reload which happens after sending a message via the contact form or clearing the cart when using J2Store. So since you hadn't dealt with the page reload that is most likely why you hadn't seen the issue yet.
The same goes for the display:none; attribute that was added to the class .g-system-messages because that class is a default Gantry 5 class to show the system messages in the Gantry 5 templates. This part is necessary because the "thank you message", after sending a message via the contact form, is displayed AFTER the page has reloaded. So, without it, until the page has fully loaded, the "thank you message" would be displayed in the normal Gantry 5 system messages position. This attribute suppresses it, so it is not seen until the page has fully loaded and then shows it in the modal window.
If I've missed something or if I'm incorrect about something please let me know.
regards,
Michael
-
-
-
- MICHAEL KOONTZ
- Rocketeer
- Posts: 89
- Thanks: 9
-
A quick update, here is an explanation from Andreas Kar (thex) about the jQuery / Javascript changes he did to the TWIG file for PopupMessages Atom and how it corresponds to the CSS changes.
The JavaScript received an extensive rework to support the previously missing functionality, fix the bugs and also clean up the first code revision.
The first version didn't consider system messages that are already there on page load (directly transfered with the HTML markup e.g. on the first GET of the corresponding page).
So the new version checks on page load if there are already messages present and if so appends the corresponding CSS class that the messages are displayed in a modal (here is also the place were the display: none comes in to play).
Moreover the event handling was updated so that we don't need to recreate the keyup event over and over again (for ESC) after each modal open and close.
This event is added once and kept persistent. The previous code flow was basically not necessary and overcomplicated so an additional condition was added to make things easier and more general.
Finally the whole modal open and modal close functionality was separated into two functions so that we can call them easily without code duplication. E.g. we need to call the openModal() code now twice, first on page load to ensure that already rendered message are displayed in a modal and second for dynamic messages that are generated by other JS code.
Additionally the CSS selectors and their strings were outsourced to variables so that the script can be adapted at one point for other similar scenarios in the future, that makes things a little more comfortable, maintainable and modifiable. - Last Edit: 5 years 4 months ago by MICHAEL KOONTZ.
-
Time to create page: 0.047 seconds