homepage Welcome to WebmasterWorld Guest from
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Become a Pro Member
Home / Forums Index / Code, Content, and Presentation / WordPress
Forum Library, Charter, Moderators: lorax & rogerd

WordPress Forum

Need a WP modal window plug-in

5+ Year Member

Msg#: 4351169 posted 3:52 pm on Aug 13, 2011 (gmt 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!




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

Msg#: 4351169 posted 4:49 pm on Aug 13, 2011 (gmt 0)

Where does the content live? Is it a Post or a content from a Calendar plugin?


5+ Year Member

Msg#: 4351169 posted 7:53 pm on Aug 14, 2011 (gmt 0)

It would be a post plug in or something like that...the info would be bio info (paragraph with pic and website)


WebmasterWorld Senior Member 10+ Year Member

Msg#: 4351169 posted 7:20 am on Aug 15, 2011 (gmt 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>


5+ Year Member

Msg#: 4351169 posted 3:41 pm on Aug 15, 2011 (gmt 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!

Global Options:
 top home search open messages active posts  

Home / Forums Index / Code, Content, and Presentation / WordPress
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved