Display Content in a Modal Window

The <widget:modal> tag shows the contents of the tag body in a Modal window, masking (greying out) the rest of the page.

Modal windows are useful if you want to load secondary content within a page in a popup window shown above existing content. Content is loaded as an HTML fragment in the modal through an AJAX call, and referenced by URL and ID/unique reference - all handled behind the scenes by the twigkit <widget:modal> tag.

This tag has next and previous options, which allow the user to load a list of content links one by one into the modal (achieved through the use of one or more preview links on the underlying page).

Usage

This example shows how to add a modal window to the page, triggered by a link with the 'preview' class.

When no body is specified for the tag, Appkit generates appropriate HTML for the modal window contents.

For correct modal use, create a separate JSP page containing modal content that is loaded by a passed-in ID. This JSP page can contain whatever you want in terms of formatting/layout, but because is loaded as a fragment, it shouldn’t contain HTML or body tags.

Example

Loading a detail modal, loaded from a search result list.

Create the modal fragment

In this case, we assume that this is named with a URL/query string parameter of ID. This is details.jsp:

<%@ include file="/WEB-INF/tags/client/taglibs.jspf" %>
<%@ page contentType="text/html" pageEncoding="UTF-8" %>
<%– This is TwigKit. Documentation at: http://dev.twigkit.net/docs/[http://dev.twigkit.net/docs/] –%>

<%– load the record data –%>
<search:twigkit>
 <c:set var="id" value="${search:decode(param.id)}" />
 <search:platform conf="platforms.gsa" var="platform" />
 <search:content var="modalResult" platform="${platform}" load="${id}" />
</search:twigkit>
<%– display the modal –%>
<widget:modal title="${modalResult.fields.title}" url="${modalResult.fields.url}">
 <search:field result="${modalResult}" fieldName="title" style="title" />
 <search:field result="${modalResult}" fieldName="summary" style="description" maxCharacters="250" />
</widget:modal>
Note
This is just a fragment, with no surrounding HTML tags. Change the platform tag configuration to match your platform, and amend the modal content.

Reference the modal in your existing page

This is just a standard html link (which can be styled however you want - link/button etc) the key being that it has a class of preview - this is what the modal script uses when generating next/previous links.

<%-- within a <search:result> tag --%>
<a class="preview" href="${pageContext.request.contextPath}/details/${search:encodeForURL(result.fields.url)}/">load modal</a>

This can be referenced multiple times within a set of search results, and using the showNextPreviousLinks attribute on the modal, all links will be iterable through. In this example, we pass in a URL field as ID. Change this to whatever your data is referenced by.

The modal expects a URL/query string parameter, but the preview link URL is in a pretty URL format. This is achieved through the use of this default URL rule in URL rules:

<rule>
  <from>^/([^/]*)/(.*)/</from>
  <to last="true">/WEB-INF/pages/$1.jsp?id=$2</to>
</rule>

This is an implementation detail. You can use a regular query string parameter, ?id=1.