SimpleModal with JQWicket

Updated

I was recently asked to implement a modal dialog to a web page that uses Wicket as the presentation framework.

I knew that Wicket contains a ModalWindow class, which creates a modal dialog panel to the screen. This implementation, though, has some drawbacks, for example I couldn’t find a way to modify the borders easily and also I didn’t find a way to disable dragging of the window.So I tried to look for other out-of-the-box implementations, but I couldn’t find any that would have suited my needs.

So in the end, I found a SimpleModal plugin for JQuery by Eric Martin. SimpleModal was just the thing I needed, it was simple implementation and it was easy to modify. Although it did require JQuery, so I decided to implement it on top of JQWicket, which makes it easy to use JQuery with Wicket.

Adding SimpleModal on top of JQWicket was surprisingly easy thing to do. The only things I needed to do were download the SimpleModal Javascript file, attach it to the page header, add proper html and attach a JQBehavior which opens the dialog when a link is clicked.

Source code for the page is simple:

package net.korri.www.example;

import org.apache.wicket.markup.html.IHeaderResponse;
import org.apache.wicket.markup.html.TransparentWebMarkupContainer;
import org.apache.wicket.markup.html.WebMarkupContainer;
import org.apache.wicket.request.resource.PackageResourceReference;

import com.google.code.jqwicket.JQBehaviors;

public class ModalPage extends WebPage {

    public ModalPage() {
       
        WebMarkupContainer dialog = new TransparentWebMarkupContainer("dialog");
        dialog.setOutputMarkupId(true);
        add(dialog);
       
        WebMarkupContainer link = new WebMarkupContainer("modal_link");
        link.add(JQBehaviors.mouseClick("$('#"+dialog.getMarkupId()+"').modal();"));
        add(link);
    }

    @Override
    public void renderHead(IHeaderResponse response) {
        response.renderJavaScriptReference(new PackageResourceReference(getClass(), "jquery.simplemodal.1.4.2.min.js"));
    }
}

And the corresponding html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:wicket="http://wicket.apache.org/dtds.data/wicket-xhtml1.4-strict.dtd"
    xml:lang="en" lang="en">
<head>
    <title>ModalPage</title>
    <style type="text/css">
    #simplemodal-overlay {
        background-color: #000;
    }
    #simplemodal-container {
        background-color: #333;
        border: 8px solid #444;
        padding: 12px;
    }
    </style>
</head>
<body>
    <h1>Modal dialog</h1>
    <a href="#" wicket:id="modal_link">Open dialog</a>

    <div wicket:id="dialog" style="display: none">
        <h2>Modal Dialog</h2>
        <p>This is sample modal dialog</p>
        <p>
            You can click <a href="#" class="simplemodal-close">close</a> to close this dialog.
        </p>
    </div>
</body>
</html>

The html page contains some initial css styles for the dialog so that you can see it when it’s open.