How We Invoke Modals

There are two methods to calling modals:

1. Load modals directly on the page ("Pre-Loaded Modals") as part of the main page content (DOM). The advantage to this is that the modal’s DOM will be part of the calling page’s DOM. In other words, Javascript can be located all together on the calling page and it will have access to any DOM elements (e.g. form fields, divs, etc.) on either the calling page or the modal. Since the modal is included on the main page, it is really just part of the main page content – just embedded in a div that can be hidden and displayed as a modal. That is all that is unique about it.

2. Load modals dynamically ("Dynamically Loaded Modals") into containers on the page (calling page). In this method, empty divs are declared for the modals, but the content isn’t loaded into these divs until after the page has been completely rendered and some action (e.g. a user clicking on a button or link) triggers the subsequent loading and displaying of the modal windows.

One key difference in these methods is in how the modal’s DOM is treated. In the dynamically loaded modal scenario, the DOM for the modal is completely separate from the calling page’s DOM because it is called and rendered after the calling page has already been completely rendered. For example, a jQuery document.ready() on the calling page would never be able to reference any of the form fields or other DOM elements of the modal page as the modal page DOM didn’t exist when the calling page rendering was completed and the document.ready() was triggered; all that existed was an empty div to hold the modal content if and when it was triggered.

The other key difference in these methods is the size (and thus rendering time) of the calling page. For modals that are loaded directly on the page, they and all of their content are loaded as part of the main page. Thus, if there were 100 modals (e.g. one per record in a table that had 100 records), all content from the 100 modals will be part of the page content. This will significantly increase the loading time of the page in a browser and just isn’t practical beyond a handful of modals. On the other hand, dynamically loaded modals aren’t sent to the user’s browser until some event (e.g. the user clicking a link) triggers the loading of the modal. Until then, all that exists is an empty div waiting for the modal content to be loaded into it. Obviously, for modals launched from tabular data (e.g. jQuery dataTables), this is the preferred method.

Dynamically Loaded Modals

1. Create the empty div container somewhere on the calling page:

<div class="modal-container"></div>

2. Create a js function that you can call to load the container with the modal:

function callModal(parameter) {
    $( ".falloffModal-container").load("inc/modals/Falloff.cfm?ID="+parameter,function(result){
        $('##falloffModal').modal({show:true});
    });
    return false;
};

In this method we're using the jQuery .load() method to load the content of the modal into the container div.

Pre-Loaded Modals:

1. Create an include reference for the modal windows content:

<cfinclude template="inc/modals/remindAll.cfm"/>

2. To display the window, simply call the jQuery .show() method, referencing the modal div id:

$('#remindAllModal').modal();