How to Close Popup on Button Click by Classname in WordPress
Want to let users close your popup with a simple button click? Whether you're offering a discount, collecting emails, or showing important announcements, it's important to give visitors control over when and how popups disappear.
This step-by-step guide with screenshots will provide you with enough information on how to close the popup on the class button. You will find all the needed steps for using this option in this tutorial. Don’t miss any part of it.
Even if you're not a developer, you’ll be surprised at how simple this process can be. Whether you're running an online store, a blog, or a service website, this feature can help improve the overall user experience and reduce frustration by giving users more control.
We’ve broken it down into clear, actionable steps, so you can confidently apply the changes without touching a single line of complex code. Let’s dive in and make your popups even smarter and more user-friendly.
Step 1
Let’s start by setting up our website popup. Go to the Popup plugin and click on the Add New button. Choose a popup type. Let’s choose the Subscription Popup type. Then choose the template.
Make sure to pick a design that aligns with your website’s look and feel—this helps build trust with your visitors. You can always customize the text, colors, and layout later to better suit your needs.
Once you've selected your template, don't forget to give your popup a clear and descriptive title. This will help you stay organized, especially if you're planning to create multiple popups for different purposes.
The Popup is already set. Now it's time to adjust the popup and make it work based on what the user does, starting by setting up the click trigger in the next step.
Step 2
For using the Close Popup on Class Button option you will need to firstly save your popup so that the classname can be generated.
Now, as we can see from the screenshot here we have the Popup description field. Our button is located there.
Let’s move to the Settings tab and copy the classname.
Click on the Close by classname (onclick) for enabling the classname. Now copy the classname and move back to the General tab.
Change the Popup description field from visual into text and find your button <div>.
Add another class and insert the classname into it.
Step 3
Click on the Save the Changes button.
Yes, that’s all you have to do for closing your popup.
Wrapping Up!
At first, it may sound a little bit hard, as you have to make changes in CSS. But it wasn’t as hard as it may sound. All the above-mentioned steps will help you to do it in the easiest way. Now you know another way to close the popup.
But to learn more about the WordPress Popup plugin just go and watch the video tutorial on our YouTube channel and read the articles in our blog.
But if you want to see real demonstrations of the popups, then you must visit our demo page and see what we have created special for you.
