How to create a Popup like Earning points

Hi,

I am new in programming. Can you tell me how to create a popup like

https://premium.wpmudev.org/dashboard/#dash2-earn-points

when you press Earn button in Dashboard?

Best regards,

Daniela

  • Milan

    Hello Daniela,

    I hope you are having a good day and thanks for asking us. :slight_smile:

    Dear member to create popup like you mentioned, you'll require some basic knowledge about html and CSS. With Popup pro you'll be able to create new popups via Popups > Add New.

    As you can see in attached screenshot, on popup creation page you'll have content editor where you can easily setup your popup content's html markup. Once you setup markup next steps is to design its look and feel by css. Now to apply css rules to your popup content, you'll have Custom CSS (optional) section at the end of popup creation page. For your information I've attached screenshot explaining you where you can write custom css rules for your popup content.

    it may be possible that you already know above flow, but dear member above is the flow through which you'll be able to create any kind of popup with our plugin. For any popup only requirements are its content and css rules for your popup.

    I hope this helps you.

    Let me know if you need further information regarding this. :slight_smile:

    Cheers,
    Milan Savaliya.

  • Daniela AFTENI

    Thank you dear Milan,

    I kinda know to use PopUp but not .css (I guess I'll learn it during the implementation process or i will ask the Support Team).

    My question is if that specific popup is created using PopUp plugin or just a JavaScript code assigned to that button. Please look at that button in your dashboard and you will see it has assigned some thing like "#dash2-earn-points" in the submit code for that button.

    Best regards,

    Daniela

  • Adam Czajczyk

    Hello Daniela,

    I hope you're having a nice day!

    I assume you're wondering how to make popup show up when user click on a button on a page - just like in our dashboard it shows up after clicking on "Earn". Am I correct?

    My colleague @Milan described how to create popup. The plugin he was referring to is our "PopUp Pro" plugin which you will find here:

    https://premium.wpmudev.org/forums/topic/facebook-group-posting-issue

    Once you get it set up and you got your popup created to "look&feel" the way you wish, please follow these steps:

    - decide which element on the page should trigger the popup (add a button if necessary)
    - find out an ID or class name of that element; you may use Chrome Dev Tools for this as explained here:

    https://developer.chrome.com/devtools#dom-and-styles

    - go to your dashboard's "PopUp -> Settings" page, scroll it down a bit and activate the "JavaScript Events" module

    - go back to an edit screen of you popup
    - in "Behavior" section select "Appear when user click on a CSS Selector"
    - put an ID (or a class name) of an element in the box below

    Having said that, I think you could start with installing PopUp Pro plugin and then try to setup/design your popup. In case you had any troubles with CSS let us know and we'll help you.

    Once the popup itself is done, you could then "connect" it to the button on page and in case you'd need some help with this as well, also let us know please!

    Best regards,
    Adam

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.