jQuery popBox

This plugin provides a simple to use popup textarea extension for textboxes.

If you have ever come accross the situation where you have a bunch of text boxes that you want the user to fill in, for example in the back admin system of a site, but it is annoying for the user to try and type in text in a small box and you do not want to launch a full blow text editor, this plugin will automatically popup a textarea for text input.

A perfect addition for backend admin systems. Simple, effective and fast.

This plugin can be applied to a textbox or textarea (see notes on textarea usage). Basically if the user clicks on a textbox which has popBox applied to it, a nice modal popup box will appear with the textarea selected for the user to enter their text, if they click outside of the area or on the ‘done’ button it will dissapear and the text will be inserted into the initiating textbox.

The other cool thing is the user can tab into a textbox, the popup will appear with the cursor set inside it, they can then continue to type, hit tab and be taken back out and continue to tab to the next textbox – similiar to tabbing through a spreadsheet.

All the styling is done in CSS, no images, the button is also CSS. Rounded corners will degrade properly in IE. There is no animation or clever tricks as I wanted it to be fast, I have a page with rows of textboxes that this is applied to and it needs to be quick and responsive. Future additions may include animation, styling options etc. It comes with CSS which can be modified as you like.

Hitting the ‘Escape Key’ will back out any changes you make and cancel the operation.


popBox used to enter text in admin area.

Download plugin page: https://github.com/shibbard/jQuery-popBox/downloads

A demo can be found here: http://www.mywebdeveloperblog.com/projects/popBox/demo/

Usage is very simple.

1. Include jQuery (I use the Google CDN)

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js”></script>

2. Inlcude the popBox.js or the minified version popbox.min.js and the popbox.css files

<script src=”js/popBox/popBox1.2.1.min.js” type=”text/javascript”></script>
<link href=”js/popBox/popBox1.2.1.css” rel=”stylesheet” type=”text/css” />

3. Apply to your textbox:

$(document).ready(function () {
$(‘#input-box’).popBox();
});

Thats it! simple.

Optional arguments are:

height: popup textarea height
width: popup textarea width
newlineString: the newline string to use when copying the text back to the original textbox

Note: As the html textbox (input type=”text”) does not support newline chars this plugin will replace newlines with ‹br›. This can be changed using the options, for example if you want to apply this plugin to an existing textarea (which is small) you can set newlineString to be ‘n’ and it will be preserved.

Options examples:

$(‘#input-box’).popBox({width:500});

$(‘#input-box’).popBox({width:500, newlineString: “n” });


  • ngp130895

    I have no idea why I applied .popBox() but it doesn’t appear any popBox.

  • nixrana

    Is there any way of applying this to a link in a menu list, for instance in WordPress using onclick to achieve the same effect?

  • rahul gupta

    Hi, I’m trying to call this popup on OK of a modal dialog, however the popBox needs either a textarea or text field. Is it possible to call this popup from a button and save the text into a text area?

  • Kyle Sierens

    This is great script however when trying to target a TEXTAREA rather than TEXT, there is a bug, the replace RegEx needs to be removed:

    .replace(RegExp(options.newlineString, “g”), “n”)
    .replace(/n/g, options.newlineString)

    They cause line breaks in unexpected areas. When I removed these lines from the script. It worked as desired.

  • Raghu

    Is there anyway to get a popbox inside another popbox?

  • salim

    hi my name is salim/ im a ui designer// i want when open the web site first come to video popup. when end the video go to the my web site, how to get it pls tell me?.

  • http://blog.vanmeeuwen-online.nl Rob van Meeuwen

    Nice work!
    I post an article on my blog about a kind of extension for post-close event firing.
    See: http://blog.vanmeeuwen-online.nl/2011/06/raise-custom-event-after-closing-jquery.html
    Regards,
    Rob

    • http://www.tpddesign.co.uk Simon

      Hi Rob,

      Thats quite a co-incidence – I actually added this functionality to provide a callback into a new version of popbox just last week as I needed it for one of my own projects. I hope to release it this 1.4 version as soon as I get time.

      Nice write up you put together – also interesting how you have used it with the hidden fields and triggering with the icons – something I had not thought of myself :)

      regards,

      Simon.

  • phazei

    There are a couple bugs in popbox 1.3.0.

    What I’ve seen so far:
    Line 50: var labelValue = $(“label[for=” + obj.attr(‘id’) + “]”).text();
    it needs single quotes around what the for equals like so for=’obj_id’

    • phazei

      For when an id has brackets such as id=’something[else]’

      • http://www.tpddesign.co.uk Simon

        Hi phazei,

        Thanks for the heads up much appreciated. I will take a look and update it in the next release.

        regards,

        Simon.