is there a simple way to load the popup with visibility block but hiding it

  • Resolved canelodigital

    (@canelodigital)


    2 years, 5 months ago

    Hi, I am trying to use Popup Maker to open a contact-form-7 form
    In the contact form I use the datetimepicker plugin for contact-form 7

    The problem is: the datetimepicker is javascript code which apparently activates the functionality only when the form is visible on load, because it hooks in over the class name of the field

    I am assuming that, as the popup loads with visibility:none, the javascript code does not get attached to the field, so when I open the popup the functionality does not work

    The obvious workaround would be to edit the css in the plugin file so that the popup loads with visibility:block, ad move it to a invisible zone, like z-index:-300 or top:100% but off course this is not desired as it breaks when plugin is updated.

    I was trying to include css & javascript code in the footer to create a workaround, but until now unsuccessful.
    `<style>
    #pum-198{display:block !important;top:100%;}
    </style>
    <script>
    jQuery(document).ready(function() {
    jQuery(‘.popmake-198’).click(function(){
    jQuery(‘#pum-198’).attr(“style”, “top:0;”);alert(“clicked”);
    });
    });
    </script>

    Have you another idea on how to reach that the mentioned functionality gets applied to the formfield?

    it does not work here:
    https://mgautos.cl/2022/contacto/
    popup trigger is on the left column at the bottom “Solicite su visita”

    here you see the form working
    https://mgautos.cl/2022/

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support mark l chaves

    (@mlchaves)

    Hey @canelodigital,

    You probably don’t need JavaScript or jQuery.

    Can you try CSS only?

    
#pum-198.pum.pum-overlay {
	display: block;
	transform: translate(-200%, 0);
}
	
#pum-198.pum.pum-overlay.pum-active {
  	display: initial !important;
  	transform: unset;
}

    Learn how to add custom CSS here https://docs.wppopupmaker.com/article/287-getting-started-with-custom-css

    If that doesn’t work, you might need to ask the date time picker team if they have a workaround or a way to override their default selectors.

    We hope that helps.

    Let us know if you need anything else.

    Have a great day ??

    Thread Starter canelodigital

    (@canelodigital)

    Hi @mlchaves ,

    5 stars ?? thanks a lot

    Great idea with the transform and pure css.

    It didn’t work at first sight, but it made me think and scroll through the DOM again:
    The javascript hooks were always enabled, the culprit was a simple z-index issue.
    Popup Maker produces a unusual high z-index:1999999999; which simply was over the datetimepicker.

    So assigning the datetimepicker a new z-index did the trick ??
    And the transform gives me some idea for animation.

    Thanks for the help

    Have great day too…

    • This reply was modified 2 years, 5 months ago by canelodigital.
    Maria T

    (@mariatogonon)

    Hi there @canelodigital,

    That’s awesome! We’re glad to hear that and on behalf of Mark, you are most welcome! ??

    Hey if you have a moment, could you please rate the plugin?

    We’d appreciate sharing your experience with everyone.

    Cheers!

    ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘is there a simple way to load the popup with visibility block but hiding it’ is closed to new replies.