Some time ago, one of our clients expressed a need to use modal dialogs to display biographical information about the members of their governance committee.
The expected end result was to produce a modal dialog (a kind of pseudo-popup, often referred to as a “lightbox”) whenever certain links are clicked. The dialog needed to display text in the title bar and rich text content in the dialog window’s body.
In this article, I’ll break down my solution for you and provide a few recommendations along the way.
UI Framework: jQuery UI
This solution doesn’t hinge on the use of JQuery UI. You can use whatever alternative library you prefer. I’m a fan of jQuery and jQuery UI, so that’s what I chose. If you choose other tools, my code can serve as a basic guideline.
Head out to the jQuery UI site (www.jqueryui.com). Use the Themeroller to create a color scheme and style that compliments your site design. When your theme is ready, click “Download theme”.
Next, determine which of the UI and Effects libraries you’ll actually need. In my case, I selected as few components as possible, as I wanted to keep this feature fairly lightweight.
Download your custom library and implement those assets into your Sitecore project.
Content for your Dialogs
We’re going to need a place to store our dialog content. Let’s start with an new Item Template. We’ll call our template “Content Dialog”. A “Title” and “Body” field should be sufficient.
Tip: You’ll probably want to provide a common location in your Sitecore content tree for all of these Author-created Content Dialog items to reside. This folder should have Content Dialog in the Insert Options, so make life easier for your Authors :)
Rendering your Content Dialog Items
With our Content Dialog template created, go ahead and create some rendering components.
For your rendering, you’ll want something fairly minimalistic since the contents of page are to be displayed in the body of the modal window. You probably don’t want your site’s navigation menus, footer, breadcrumbs, images and the like being loaded along with your modal dialog content—do you?
Here’s an example of how your rendering should be formatted:
The Fun Part: Client-side Code
Giving Authors the Power
Our primary goal is to give our Authors the ability to implement these dialogs throughout their site. In our solution, all our Authors really need is a CSS style. Open your Editor.css file and add the following:
You’ll notice we’re not actually applying any styles here. We don’t necessarily need any. Although, you could add some styling that gives a site visitor a visual indication that this link is different from others. The core objective is simply to give the author a named style, which they can apply to their links throughout the site as desired.
Our new CSS class addition can now be assigned to links, either when working with General Link fields or in the Rich Text Editor’s Hyperlink Manager.
Here are the steps:
Create a new Content Dialog item in your content tree and fill-in your content.
Edit or create a page that has a Rich Text or General Link field.
Create a link that points to your recently created Content Dialog item and assign the “content-dialog” class to the link.
That’s it. Browse to the test page and enjoy the fruits of your labor!