-
AuthorPosts
-
March 26, 2023 at 11:50 am #1402533
Hey there,
do you have an Idea for this Challenge?
I would like to open a Popup Textfield with further Informations about the course.
I gave each course a class. For Example ” .fitness-boxen”Cheers and Thanks
MonikaMarch 26, 2023 at 9:23 pm #1402571Hey Monika,
Thank you for the link to your site, I see that you have columns and rows of text block elements creating a grid, in a section with the ID #av-extra-columns, each text block contains minimal information and you would like these blocks to open into a popup with more information.
First try adding some “hidden” text in your text block element, to hide the text add the class hidden to the paragraph tag like this:
<p class="hidden">This is hidden text</p>
, you may wish to edit the text elements in the “text” tab instead of the “visual” tab so you can see the paragraph tags. Now that your extra information is added to the text blocks try this CSS in your Enfold Theme Options ▸ General Styling ▸ Quick CSS field:.mfp-content { display: inline-flex !important; } .copyBlock-popup { position: relative; background: transparent; padding: 20px; width: auto; max-width: 800px; margin: 20px auto; } .copyBlock-popup .avia_textblock { min-width: 300px; float: left; margin: 0 20px 10px 0 } .copyBlock-popup .avia_textblock { width: 100%; color: #000; } .copyBlock-popup .mfp-close { right: 10px; top: 10px; } #av-extra-columns .avia_textblock .hidden { display: none; } .copyBlock-popup .avia_textblock .hidden { display: block; position: relative; visibility: visible; } #av-extra-columns .av_textblock_section:hover { cursor: pointer; }
Then add this code to the end of your child theme functions.php file in Appearance ▸ Editor:
function custom_popup_script() { ?> <script> window.addEventListener('DOMContentLoaded', function() { (function($){ $('#av-extra-columns .av_textblock_section').each(function () { var copyBlock = $(this).clone().html(); $(this).magnificPopup({ items: { src: $('<div class="copyBlock-popup">'+copyBlock+'</div>'), }, type: 'inline' }); }); })(jQuery); }); </script> <?php } add_action('wp_footer', 'custom_popup_script');
Now when you click on the blocks they will open in a popup and show the extra information.
Best regards,
MikeMarch 28, 2023 at 11:02 am #1402750Hey Mike,
thank you very much.
I dont know why, but that does not work.
I Tried it with the first field “fitness boxen”.
The Text is hidden, that worked.
I added the Java in the theme editor and the CSS to the customizer.Perhaps you have an Idea?
March 29, 2023 at 12:54 am #1402841Hi,
Thanks for the login, I found this css creating an overlay so that the text blocks are not receiving the click to activate the popup..hintergrund-04::before { content: ''; display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-image: url('/wp-content/uploads/2023/03/your-image-07.svg'); background-repeat: no-repeat; background-position: right top; background-size: contain; z-index: 1; }
I changed the z-index to zero to correct, please clear your browser cache and check.
Best regards,
MikeMarch 29, 2023 at 8:25 am #1402862Hey Mike,
wow, now it works!
Thank you!But do you know, why the mouse does not change to a mouseover-Icon?
Now nobody knows, that the textfield is clickable :DMarch 29, 2023 at 8:27 am #1402863PS: the Textcolor changes in the popup and gets a bit lighter. It should be solid black.
In the css for this popup, I could not find any stlying .. How is this possible?March 29, 2023 at 11:45 am #1402882Hi,
To change the pointer on hover please add the is css:#av-extra-columns .av_textblock_section:hover { cursor: pointer; }
To adjust the text color please add the css:
.copyBlock-popup .avia_textblock { color: #000; }
After applying the css, please clear your browser cache and check.
Best regards,
MikeMarch 29, 2023 at 11:54 am #1402883Thank you! That worked! :)
The only Thing which is now irritating:
Mouse-Over is activated on every textfield in this section. Even on the Textblock “monday” “Tuesday” etc..
User could click on that and nothing happens.Is it possible to set the mouseover only there, where there is really something hidden?
March 29, 2023 at 12:03 pm #1402885Hi,
Please try this css for the hover event instead:#av-extra-columns .av_textblock_section:not(:first-child):hover { cursor: pointer; }
Best regards,
MikeMarch 29, 2023 at 12:08 pm #1402887Thank you!
That worked!March 29, 2023 at 12:13 pm #1402888March 29, 2023 at 12:15 pm #1402889Yes Thank you!
March 29, 2023 at 12:17 pm #1402890Hi,
Glad we were able to help, if you have any further questions please create a new thread and we will gladly try to help you. Thank you for using Enfold.Best regards,
Mike -
AuthorPosts
- The topic ‘small popup opening by click on a Text-field’ is closed to new replies.