You want to open LightBox / Popup when the page loads based on some condition (for example, when you have any pending tasks in task list). 



Note: If you want to open light box automatically & always, we have another article for you.


In this article we will explain how to show popup when you have any tasks due today. However you can use the logic according to your requirement, you can construct your own REST API query yourself.



Step 1: Add a ShortPoint Element with a Lightbox Linking to the Page


Add any ShortPoint element that supports adding links to your page (e.g: We'll use button for this example), Specify the link for the page you want it to open automatically on page load and Set the linking option to lightbox as well




Step 2: Set an ID for the ShortPoint Element

For the same element we added in the previous step, switch to the Custom CSS tab, and give it an ID lightbox_button



Note: If the ShortPoint Element that has your popup link resides inside an Items/Tiles tab (as shown below), you need to set the ID from the Items/Tiles tab, not from the Custom CSS tab.



Step 3: Add JavaScript to Automatically Click your Link


So far we have a link on the page that once you click on it, it will open your desired popup, the only thing that is left, is that we need to make that link to open automatically once the page is loaded.


To do that we need to add a Script Editor Web Part to the page, and add the following code to it.


<script type="text/javascript">
function getTodayISO()
{
var d = new Date();

// no need of time here
d.setUTCHours(0,0,0,0);

return d.toISOString();
}
function getTomorrowISO()
{
var d = new Date();

d.setDate(d.getDate() + 1);
    
// no need of time here
d.setUTCHours(0,0,0,0);

return d.toISOString();
}

function AnyOverdueTasks()
{
  var $ = shortpoint.$; 
  var dfd = $.Deferred();
  var requestUrl = _spPageContextInfo.webAbsoluteUrl + '/_api/web/lists/getbytitle(\'Tasks\')/items?$select=Id,Title,StartDate,DueDate&$filter=(DueDate ge datetime\'' + getTodayISO() + '\' and DueDate lt datetime\'' + getTomorrowISO() + '\')&$top=1';
  
        return $.ajax({
                   url: requestUrl ,
                   method: 'GET',
                   headers: { 'Accept': 'application/json; odata=verbose' },
                   success: function (data) {
                        if (data.d.results.length > 0 ) {
dfd.promise(true);
                             //This section can be used to iterate through data and show it on screen
                        }       
                  },
                  error: function (data) {
                      dfd.promise(false);
                 }
          });  
  return dfd.promise();
}
(function() {
  /**
   * hook method to be executed as soon as shortpoint
   * rendered on the page
   */
  function ShortPointReady() {
  var anyOverdueTasks = AnyOverdueTasks();
    anyOverdueTasks.then(function(anyTasks) {
      if(anyTasks){
        shortpoint.$('#lightbox_button').click();
      }
      });
  }
  // shortpoint not yet available in the page
  // wait for shortpoint render dom event
  document.addEventListener( 'shortpoint-render-above-fold', function() {
    // exit on edit mode
    if( window.shortPointInserter ) {
        return;
    }
    setTimeout( ShortPointReady , 500);
  });
})();
</script>


As you can see in above script, popup will only open when AnyOverdueTasks method returns true.


Now save the page, and your popup will appear every-time a user visits your page.


The popup will open automatically when you have any task due today.