Skip to Content

This tutorial will teach you how to create a Lightbox Popup with a “Click anywhere to close” functionality.  After going through this tutorial, you will know not only how to create this popup but also how to modify it to suit your particular needs.

/wp-content/uploads/2013/05/popup_01_215168.png

Step 1: Insert the Popup button

Insert a Push Button component in your dashboard.  This button will trigger the popup. 

  • Source: B2. 
  • Destination: B1.

Step 2: Build the Spreadsheet formulas

Put the following formulas in the corresponding cells:

  • A1 = “Popup Visible?”
  • B1 = “No”
  • B2 = “=IF(B1=”Yes”,”No”,”Yes”)”

This is what you should end up with:

/wp-content/uploads/2013/05/popup_02_215169.png

Step 3: Popup background

Add a Rectangle component, which will become the shaded background of your popup.  Set its properties as follows:

  • Fill: Solid, Black. 
  • Transparency: 50%. 
  • Visibility Status: B1.
  • Visibility Key: “Yes”. 

Change the rectangle’s size until it covers your entire dashboard (or whatever region you wish to obscure)

Step 4: Popup

Add your popup component.  Set its properties as follows:

  • Visibility Status: B1.
  • Visibility Key: “Yes”. 

Step 5: “Close Popup” button

Add another Push Button component to the dashboard.  This button will implement the “Click anywhere to close” functionality.  Set its properties as follows:

  • Label: None. 
  • Source: B2. 
  • Destination: B1.
  • Visibility Status: B1.
  • Visibility Key: “Yes”.
  • Transparency: 100%. 

Change the button’s size until it has the same size as the black rectangle from step 3.  Also ensure that this push button is ‘on top of’ both the black rectangle from step 3 and the popup component from step 4.

End Result

The end result should behave as follows:

          1. Click the popup button from Step 1

          2. The shaded black rectangle and popup image should appear, as well as the invisible button on top of them

          3. Clicking anywhere triggers the invisible button, which closes the popup

To report this post you need to login first.

8 Comments

You must be Logged on to comment or reply to a post.

  1. Former Member

    Hi Alex,

    Invisible option is not working when i click on second push button.

    I have followed the same steps, but its not working.

    Please advise.

    (0) 
    1. Former Member Post author

      Add a Spreadsheet component to your dashboard.  Map it to cells B1:B2.

      What does it show:

           When you first load your dashboard?

           When you push the first Push Button?

           When you push the second Push Button?

      (0) 
      1. Harshil Joshi

        Alex,

        It is not working.

          When you first load your dashboard? B1=No, B2=Yes

             When you push the first Push Button? B1=Yes, B2=Yes

             When you push the second Push Button? B1=Yes, B2=Yes

        (0) 
        1. Former Member Post author

          The formula you wrote in B2 is wrong.  As per my post, you should have written:

          B2 = “=IF(B1=”Yes”,”No”,”Yes”)”

          So you should never have both B1=Yes and B2=Yes

          (0) 

Leave a Reply