Welcome to WebmasterWorld Guest from 54.147.44.93

Forum Moderators: rogerd & travelin cat

Message Too Old, No Replies

Need a WP modal window plug-in

     

IntegrityWebDev

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

5+ Year Member



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!

Thanks!
Chris

lorax

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

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



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

IntegrityWebDev

7:53 pm on Aug 14, 2011 (gmt 0)

5+ Year Member



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

lexipixel

7:20 am on Aug 15, 2011 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



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,
width:600,
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>
</div>

IntegrityWebDev

3:41 pm on Aug 15, 2011 (gmt 0)

5+ Year Member



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!
 

Featured Threads

Hot Threads This Week

Hot Threads This Month