How to add a popup window in coreFORCE

Created by Ezra Weinstein, Modified on Tue, Aug 23, 2022 at 5:14 PM by Ethan Harris

The system will look for a div with ID "onload_website_popup", presumably with the class "dialog-box" (though that is not necessary). This div will be displayed as a JQuery UI dialog box, but with no buttons and no title. By default, it will only be displayed once for the browser, since a cookie will be set so that it doesn't display again (this can be changed, as noted below).

 

So, as an example, if the following is included in a page, it will hidden ("dialog-box" is automatically hidden) and displayed for the user when the page loads:

 

<div id="onload_website_popup" class='dialog-box'>
<p class='align-center'><img src='/getimage.php?code=free_gun_popup'></p>
<p>Thanks for visiting our site.</p>
</div>

 

IF there is a javascript function in the page named "beforeShowOnloadWebsitePopup", that will run before the popup is displayed. So, if the customer wants it to display EVERY time (not recommended!), you could create that function in the page and clear the cookie ("onload_website_popup").

 

A powerful use of this is a popup that lets the user sign up for a newsletter/mailing list. Using the previously described functionality for signup, you could do this:

 

<div id="onload_website_popup" class='dialog-box'>
<p class='align-center'><img src='/getimage.php?code=free_gun_popup'></p>
<div id="_subscribe_form_wrapper">
<form id="_subscribe_form">
<input type='hidden' name='mailing_list_code' id='mailing_list_code' value='FATHERS_DAY_FREE_GUN_2020,NEWSLETTER'>
<div class='form-line'> <input type="text" class='validate[required]' id="signup_first_name" name="signup_first_name" placeholder="First Name"> </div>
<div class='form-line'> <input type="text" class='validate[required]' id="signup_last_name" name="signup_last_name" placeholder="Last Name"> </div>
<div class='form-line'> <input type="text" class='validate[required,custom[email]]' id="signup_email_address" name="signup_email_address" placeholder="Email Address"> </div>
<p class='align-center'><button id="_subscribe_form_button">Signup</button></p>
</form>
</div>
</div>

 

Notice that when the user signs up, they are signing up for TWO mailing lists: FATHERS_DAY_FREE_GUN_2020 and NEWSLETTER.

 

If you want to manually display the popup, just call the function showOnloadWebsitePopup

Was this article helpful?

That’s Great!

Thank you for your feedback

Sorry! We couldn't be helpful

Thank you for your feedback

Let us know how can we improve this article!

Select at least one of the reasons
CAPTCHA verification is required.

Feedback sent

We appreciate your effort and will try to fix the article