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).


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.


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 –%>
 <c:set var="id" value="${search:decode(param.id)}" />
 <search:platform conf="platforms.gsa" var="platform" />
 <search:content var="modalResult" platform="${platform}" load="${id}" />
<%– 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" />
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:

  <to last="true">/WEB-INF/pages/$1.jsp?id=$2</to>

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