Additional button to close Hustle popup?

How to create an additional button (custom one) inside the popup to close it? If there'd be a button created in HTML/CSS added to it, is there any specific class/selectors chain that it should be using to "hook to" native Hustle's JS popup close event?

Or does it need some additional JS, if so what?

  • Predrag Dubajic

    Hey Peter,

    Hope you're doing well.

    You can add your own button by switching to Text mode and adding a HTML like this one:

    <div class="hustle-modal-close">
    	<div class="hustle-icon">No thanks, got too much money to start with</div>
    </div>

    Both of those classes are needed to fire up the script for closing the popup.

    After that you can use this CSS to further style it:

    .hustle-modal-message .hustle-modal-close .hustle-icon {
        max-width: 100%; /* Don't remove */
        max-height: initial; /* Don't remove */
        color: #fff;
        background: #5a5af7;
        width: 50%;
        border-radius: 4px;
    }

    Note that additional class in CSS selector is needed so that changes don't apply to the original close icon.
    Also, I've commented first two attributes with Don't remove because those are there to override the width and height of the X icon size and shouldn't be removed.

    Hope this helps.

    Best regards,
    Predrag

  • Adam Czajczyk

    Hey Peter!

    It's great to know that it worked for you.

    And actually yes, it was very close. We even tried something similar in the chat yesterday but I missed one simple and yet so important details here, the "hustle-modal-closer" and "hustle-icon" classes being used at once but not within a single element, just with two elements instead.

    Anyway, I'm glad you got that sorted now thanks to Predrag :slight_smile:

    Best regards,
    Adam

  • Jai

    This is great. Is there anyway for the close button to close the pop up then trigger another pop up? Essentially I want someone to accept a Disclaimer before using the site, then another pop up appear with a data capture form. I tried adding the shortcode [wd_hustle id='mailchimp' type='popup']I ACCEPT[/wd_hustle] to sit within the DIV Class, but it just closes the initial window rather than triggering the second.

    • Predrag Dubajic

      Hi Jai,

      I believe that the best approach to have something like this is to combine Hustle with Forminator.
      You can create a new form with pagination in Forminator and on your first form page add the information you want and change Next in pagination to "I Accept", and then after pagination add your desired form elements.
      Now when you add this form to popup it will show your form in the same popup after visitor clicks on I Accept.

      If you need further assistance with this please start a new ticket or chat so we can discuss this further without spamming original ticket creator with email notifications about our responses.

      Best regards,
      Predrag

  • Peter

    Hi Predrag,

    sounds like I REALLY need to take Forminator for a spin :slight_smile:

    Apart from that: I have currently solved my problem with a few lines of js and css. Using js to add/remove css classes on elements to hide them or make them show. Instead of opening a new popup. Works a treat. But Forminator sounds great for things regarding consent. At least, if the consent gets stored in the db I suppose.

    Cheers,
    Peter

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.