This article explains how you can use Essential Grid's "Ajax Post Content" feature with the popular "Easy Modal" plugin.
1. Install and activate the "Easy Modal" plugin.
2. Create a new "Easy Modal".
2.1 Give the new modal a name, and choose the "Load Sitewide" option.
2.2 Next, in the "Display Options" tab, choose "None" for the "Animation Type".
2.3 Next, click the "Publish" button to officially create the new Easy Modal.
2.4 Finally, inside the "Examples" tab, copy the first hyperlink example to your clipboard.
3. Next, inside your your Essential Grid's admin, visit the "Ajax" tab, and then select the "Post Content" checkbox.
3.1 Next, scroll to the "Prepend Content" section, and paste the Easy Modal hyperlink that you previously copied to your clipboard.
3.2 Then scroll to the "Advanced" section, and type in "esgOpenTheModal" into the "JavaScript Callback" section.
3.3 Next, scroll up to the "Ajax Container" section, and apply the 3 settings shown in the following screenshot.
3.4 And then apply the following style and position options for the navigation arrows.
3.5 Finally, copy the "Container Shortcode" to your clipboard.
4. Next, head over to the "Easy Modal" plugin's main admin page, and click "Edit" for the previously created modal.
4.1 Then inside the "General" tab, paste the Essential Grid's "Ajax Container Shortcode" that you previously copied to your clipboard into the Modal's "Content" section.
4.2 Then head back to the Easy Modal's main admin page, and copy the modal's "Class" name to your clipboard.
5. From the Essential Grid's main admin page, click "Edit Skin" for your grid.
5.1 Next, select the skin element that you want to use to open the modal window, and then from "Layer Settings -> Link/SEO", choose "Ajax" for the "Link To" option.
5.2 Then inside the "CSS Editor", enter the following CSS (see code comment).
|
1 2 3 4 5 6 |
.eg-ajax-closer {display: none} /* eModal-1 is the "Easy Modal" class name */ .eModal-1 {display: none} |
6. Head back to your Essential Grid's settings page, and enter the following code into the "API/JavaScript" section (see code comment).
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
window.esgOpenTheModal = function() { /* change 'eModal-1' below to your Easy Modal's Class Name */ jQuery('.eModal-1').click(); } jQuery('body').on('emodalAfterClose', function() { jQuery('.eg-ajax-closer').click(); }); |
7. Final basic result:
