Welcome to WebmasterWorld Guest from

Forum Moderators: rogerd & travelin cat

Message Too Old, No Replies

Need a WP modal window plug-in

3:52 pm on Aug 13, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Dec 4, 2009
posts: 186
votes: 0

I have a site for a festival and the entertainment page I want to have a link for [more info] for each act that when it is clicked opens a modal window with the content.

I've played with 2 or 3 modal windows but haven't found one yet that will do this seemingly simple task.

Any leads? I can write it myself if I dont find anything but I'd rather find a simple plugin for it as I'm crunched for time. Any help is appreciated!

4:49 pm on Aug 13, 2011 (gmt 0)

Senior Member from US 

WebmasterWorld Senior Member lorax is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:Mar 31, 2002
votes: 0

Where does the content live? Is it a Post or a content from a Calendar plugin?
7:53 pm on Aug 14, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Dec 4, 2009
posts: 186
votes: 0

It would be a post plug in or something like that...the info would be bio info (paragraph with pic and website)
7:20 am on Aug 15, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 10+ Year Member

joined:Feb 16, 2004
votes: 0

here's some scraps if you have to write it yourself..

This assumes you've got jQuery UI loaded.

There are (3) parts.
1). The jquery UI functions
2). the clickable link
3). the div with the content for the modal popup.

CAVEAT: you may need to wrestle with WP to keep it from modifying the HTML in the post when you save it.

1). add this inside a jQuery "document ready" function in the <head> tag of your template--

$("#moreInfo").click(function(event){ $( "#evInfoDialog" ).dialog( "open" ); return false; });

$("#evInfoDialog" ).dialog({
autoOpen: false,
resizable: true,
show: "puff",
hide: "slide",
modal: true
(you can change options, size, "puff", "slide", etc to whatever you like)

2). Then add a div like this for the "more info" clickable link (wherever you want it to appear in the post) ---

<div id="moreInfo">more info</div>

3). Then put your additional info (text, images, links, whatever), in a div at the end of the post, or call the content dynamically if it comes from somewhere else. The option "autoOpen: false" (above, in step 1), should make it a hidden div.

<div id="#moInfo" title="Event Info">
<img align="right" src="/images/event.gif" style="margin:10px;">
<p>Here's some more info...</p>
3:41 pm on Aug 15, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Dec 4, 2009
posts: 186
votes: 0

Thanks, I decided to just "roll my own"...using your jquery post help but modified for multiple windows to open on the page. Thanks for the help!