How-To: Modal window with recents and search

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.

Discuss - 7 Comments

  1. I like the idea behind this implementation of search, but I’ve been frustrated by an inability to escape the search box.

    Once the modal window pops up, the only way to close it (that I can find) is to click one of its links or perform a search, then hit the back button.

    Am I missing something obvious?

    Ooops. I meant to mention that I’m using Firefox 1.5.0.1 on Mac OS X, and have no trouble with the Lightbox implementations.

  2. Derek says:

    Did you notice the link in the #modalDesc with class=”lbAction” rel=”deactivate”? That deactivates the modal window. It may be a bit cumbersome, but I’m open to feedback. I’m still working on a little eyecandy which offers a close tab (which explains the extra room around the modalWrapper.

  3. Jane says:

    for some reason, the modalwrapper is completely transparent. I cannot recreate the white background for the modal window that you have for the “search” modal window. Would you an idea as to what the conflict could be?

  4. Derek says:

    Not being in front of my own computer which would help with debugging, tear apart my V2 theme and take a look at the modal window. That is essentially the reason why this post was created.

  5. Jane says:

    [quote comment="4615"]for some reason, the modalwrapper is completely transparent. I cannot recreate the white background for the modal window that you have for the “search” modal window. Would you an idea as to what the conflict could be?[/quote]

    Okay, figured that one out. I copied over the css from the stylesheet in theme and that referenced a transparent gif. Changed it to #fff and everything magically is no longer transparent. Now I just have to figure out how to size the window by height. I love your themes. Just beautiful.

  6. Jason says:

    For some reason, it’s not centering on my page, any ideas?

  7. [...] How-To: Modal window with recents and search (tags: blog blogging wordpress inspiration tools toread todo design development web webdesign Web_dev webdev WEB2.0) [...]