Skip to main content

By default, a user can quickly close a displayed PX Dialog Engagement by using the small “X” close icon in the top right corner (or by clicking the “Esc” keyboard key).  Sometimes the small “X” can be hard to see, so the Engagement author/editor can also change the small “X” close icon to use a different image and even move the location too, so see this previous PX Community Post for more details.

 

A simpler option that does not require CSS editing is to add any custom button in the Engagement, which will accomplish the same thing as the default “X” close icon.  

 

 

If you add a custom button, the default user experience when clicked is that the current page in your application will refresh.  If you do not want the page refresh to happen, then you can edit the HTML source code of the button to specify the "onclick" property just like the following:

 

<a href="#" onclick="return false;">Close Me, Do Not Refresh My Page</a>

 

 

Happy PX-ing!

@kstim interesting workaround/idea here!

@link_black I tried to implement this, but every time I attempt to save, the onclick code I placed in the a tag deleted and this never works for me.

Thanks for posting to PX Community @andrew.fowler!

 

In the newer release of PX, you need to enable JavaScript in the Engagements editor to have the JavaScript code saved.  See image below:

 

 

 

Perfect, thanks for the help!

@link_black , I know this thread was from a while ago, but I would love to be able to implement the functionality of closing the dialog from a button.

Unfortunately, I cannot get the example code to work. I already checked Administration/Security/Engagements and we already have JavaScript enabled.

But when I click on the “Get Started!” button I created, the page still refreshes the page instead of dismissing the dialog.

<div style="text-align: left;"><span class="apt-custom-button" style="color: #ffffff; font-family: Arial, Helvetica, sans-serif;"><a href="#" onclick="return false;" style="text-decoration: none; color: inherit;"><span style="text-align: center;
                  line-height: normal;
                  border-radius: 3px;
                  background-color: #170dff;
                  padding: 10px 15px 10px 15px;
                  display:inline-block;
                  margin-left: auto;
                  margin-right: auto;
                  cursor: pointer;
                  font-size: 13px;">&nbsp;Let&#39;s Get Started!&nbsp;</span>&nbsp;</a>&nbsp;</span></div></div>

Any help would be greatly appreciated! Thanks!

Hi @trisha.hanlon, thanks for posting to PX Community!

 

Everything seems to be correct with your sample code above and it works properly for me on each test webapp/page that I try. Sorry. I am wondering if there is something about your web application that may be causing the refresh “on focus”?

 

Anyways, I recommend connecting with our amazing PX Support team (pxsupport@gainsight.com) for further review.

 

Happy PX-ing!!!!

Reply


Terms & ConditionsCookie settings