Click Header Button – Show a Popup (Use Footer Section)

#1. First, you need to change the Header button URL to #popup

and make sure “Open Link in new tab” is disabled.

#2. Add a section in the Footer and design its layout, we will get this to become popup content

#3. Use this tool to find this Section ID. In my example, we will have

• [data-section-id=”65fc64444b00577e6193d377″]

#4. Use this code to the Custom CSS box

[data-section-id="65fc64444b00577e6193d377"] {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    z-index: 999999;
    width: 90%;
    min-width: 300px;
    max-width: 750px;
}

footer.sections {
    z-index: 9999999 !important;
}
[data-section-id="65fc64444b00577e6193d377"]  .section-border {
    top: 0 !important;
}

span.close-popup {
    position: fixed;
    top: 10px;
    left: 10px;
}
[data-section-id="65fc64444b00577e6193d377"] {
   display: none;
}
.show-popup {
    display: block !important;
}

span.close-popup {
    background-color: #ebfc72;
    color: #000;
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
}

#5. Use this code to Code Injection – Footer

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script>
<script>
  $(document).ready(function(){
    	$('[href="#popup"]').click(function(){
        	$('[data-section-id="65fc64444b00577e6193d377"]').toggleClass('show-popup');
        });
    $('span.close-popup').click(function(){
        	$('[data-section-id="65fc64444b00577e6193d377"]').removeClass('show-popup');
        });
    });
</script>

#6. The result when users click on the Contact Us Header button