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