How-To: Modal window with recents and search

  • April 15th, 2006

modal box with recents and search

Due to my preference of minimalism over all else, I began experimenting – using the current 5ThirtyOne v2.0 template – with an alternative to generic blog Search box positions. Rather than placing the search bar in the sidebar or towards the bottom content area, I decided to create a [Lightbox powered] modal window which would draw a readers attention to focus on specific content [more specifically ‘Search’ and ‘Recent Posts’]. I’ll outline the basic structure to create your own modal ‘Search’ and ‘Recent Posts’ window.

The following steps will only cover the structure and very basic styling . Style at will to match your own site or blog. It is recommended that the post be read in its entirety before attempting to modify your own template.

Fortunately, the grunt of this modal window is handled by a derivative of the popular Lightbox.js by the name of Leightbox. Grab your own copy and upload the necessary files to your server and append the required script calls into your existing template(s).

On to the “nitty gritty”. The call for 5ThirtyOne’s modal window is the ‘Wasabi!’ link. Activating this link creates a semi-transparent overlay over the entire page with a centered content area. At the moment , this content area displays recent posts as well as the search bar. Because search functionality should be accessible from any page within the site, I’ve added the following markup into my header.php (within the <body> tags):

<a href="#lightbox1" rel="lightbox1" class="lbOn" title="View the modal window">Show me</a>
<div id="lightbox1" class="lightbox">
<div id="modalWrapper">
<h2>Snazzy Title</h2>
<div id="modalDesc">
<p>So this modal window stuff is pretty slick isn't it? Rather than bloating your page with content that your readers might not want to see, you can hide it then <em>force</em> them to look at it later. It might be mean to trap readers so let's give them an option to <a href="#" class="lbAction" rel="deactivate" title="Close this">close</a> the window.</p>
</div>
<ul class="recentPosts">
<?php get_archives('postbypost', 7); ?>
</ul>
<?php include (TEMPLATEPATH . '/searchform.php'); ?>
</div>
</div>

I’ve outlined each section of the code above:

  1. Each time a reader loads the page, lightbox.js sniffs around and notices the ‘lbOn’ class associated with the link titled ‘Show me’.
  2. Upon discovering ‘lbOn’, lightbox knows that when a reader clicks the link titled ‘Show me’, it is to activate the DIV #lightbox1.
  3. #modalWrapper may be viewed as extraneous markup. However, I’ve taken the liberty to add the additional DIV to make room for a future revision which will include livesearch.
  4. #modalDesc pertains to the content area above the standard <li> list of 7 of your most ‘Recent Posts’.
  5. Within the #modalDesc you’ll notice the link to deactivate the window returning readers to their previous view.
  6. The final call is for the WordPress searchform.php. Assuming you do have the basic search form template within your theme folder, it is called and placed at the bottom of your modal window.

Finally, the base CSS to append to your current stylesheet:

.lightbox {
color: #333;
display: none;
position: absolute;
top: 50%;
left: 50%;
width:500px;
margin:-220px 0 0 -250px;
background: transparent;
text-align: left;
z-index:1001;
overflow: auto;
}
#overlay{
display:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
z-index:1000;
background-color:#111;
-moz-opacity: 0.8;
opacity:.80;
filter: alpha(opacity=80);
}
#modalWrapper {
background: #fff;
width: 280px;
margin: 0 auto;
}
#modalDesc {
padding: 0 0.7em 0 1em;
}
ul.recentPosts {
width: 280px;
border: 1px solid #eee;
border-width: 0 0 1px 0;
}
.recentPosts li {
display: block;
width: 280px;
border: 1px solid #eee;
border-width: 1px 0 0 0;
}
.recentPosts li a {
display: block;
width: 280px;
}
.recentPosts li a:hover {
display: block;
width: 280px;
}

Hopefully the above walk through gives a better idea of how simple and pain free adding a modal window can be. Feel free to drop a line if you run into issues or have some general feedback. The above code is essentially 5ThirtyOne v2.0 code.