Modal Capsules For Dynamic Web Applications
WebRocketX makes implementing modal dialogs simple. Modals are nothing more than standard Meta Capsules containing layout that allows them to float above the page. The framework does the rest of the heavy lifting by managing the modals z-index and preventing users from interacting with layout in background.
- Home
- Using Modal Capsules
Implementing a Modal Capsule
Including content in a modal capsule will result in the content being floated
above the background page. The majority of this floating affect is simply
done using HTML styles. However, the WebRocketX framework completes the
modal behavior by placing an invisible blocking layer behind the modal popup
which keeps the user from interacting with the background page. Additionally, the
framework places each consecutive modal page on a higher z-index so that it is possible to
have an endless number of modal layers. Clean well defined modal architecture
is a hallmark of rich user interface desktop operating system applications.
The goal of WebRocketX is to make writing web applications that are just as rich
and user friendly as desktop applications into a simple, and straighforward process.
WebRocketX also adds each modal target to the browser stack, which means the back
button on the browser will roll backwards through the modal hierarchy with each click.
Since WebRocketX operates within standard javascript and HTML, it works perfectly
with JQuery plugins, so making these modal layers draggable and resizeable is simple.
Shown below is an example of content being delivered in a modal capsule. Notice how the
content extends the modal capsule, and then the modal capsule extends the meta
capsule. A development team should have just one modal capsule template and
one meta capsule template for their entire web application.
The rest of their development time can be spent efficiently extending them with content.
Keep in mind though, that all of these templates are just conveniences that help the
developer standardize their layout. If the developer prefers to just code straight HTML
they are also free to do that, as long as there content is wrapped in capsule divs.
HTML/JSP Code showing the usage of a Modal Capsule Template
Modal Capsule Template
Below is an example Modal Capsule Template. Notice that it mostly consists of a
Meta Capsule that wraps layout. The rest of the magic is a combination of CSS
and Jquery UI Drag and Drop. To see the CSS and the usage of jquery UI in the
callbacks feel free to download the
Demo Application.