Simple Popups

[fisicx]

There are shedloads of plugins that will put inline content in a popup. They use lightbox or thickbox or fancybox or whatever. But they all come with a zillion options and great chunks of code I just don't need. I've tried about 20 so far today and they are all OTT for my needs.

All I need is:
When the user clicks on a link they see an extract from a blog post.
There will be multiple links on the page each with their own extract.
It can't be one of those expanding things because the links will be displayed in a grid (an event calendar).

I just want a simple popup window thing that will display three or four lines of text and a link to the blogpost.

Anyone got any suggestions?

Ideally not a plugin as I want to embed the scripts in my plugin.

 

[The Developer]

I think the easiest and most basic modal you could use would be jQuery UI Dialogs (see jQuery site for more info).

Assuming you are using WordPress, it already has the jQuery UI libraries included so that you can use this to add it:

<?php wp_enqueue_script('jquery-ui-dialog'); ?>

Assuming you will want your own styles, no need to add the default jQuery UI styles. You just need to implement it like so (example taken from jQuery UI website):

<script>
  $(function() {
    $( "#dialog-modal" ).dialog({
      height: 140,
      modal: true
    });
  });
</script>

<div id="dialog-modal" title="Basic modal dialog">
   <p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>

I hope that is the sort of thing you were after.

 

[Alan]

Colorbox is fairly easy to code into your own plugin, if is suits your needs.

e.g. see example 4 in http://www.jacklmoore.com/colorbox/example4/

Obviously you will need to populate the html with excerpt, but you know all about that.


http://www.jacklmoore.com/colorbox/

$(document).ready(function(){
				
	$(".inline").colorbox({inline:true, width:"50%"});
				
});

I'd write the rest for you, but know you can

 

[LeighCar]

Well i was also searching for this a small problem.Thanks for the commenters who answer it, it's solved my trouble.

 

[fisicx]

Thanks for the suggestions but jquery is a very large hammer to crack a very small nut.

My quest is to create sites and plugins with as small a footprint as possible. Loading jquery slows things down on a 3G network, it might only be 100Kb but that still a chunk of code most of which isn't necessary. And because of the way WP works it will get loaded into the document head even if the user isn't on the calendar page.

As it is I've found a solution: about 10 lines of JavaScript. Super light and fast and only loads on the calendar page.

@Leighcar, why are you even on this forum?