Modalpreview
Modalpreview is a lightweight jQuery script that makes it possible to preview the textarea content in a modal window before submitting the form.
Some people have asked me about the comment preview functionality that DevKick is using in the blog, so I made it into a jQuery plugin so you can use it yourself on your site.
Many blog readers prefer to preview their comment before submitting. It is always much easier to check language, spelling and sometimes markup when looking at the text in HTML as if it was already rendered on the site. Some software comes with a built-in preview function using a back-end reload of the form, and some comes with the optional plugin (ex. wordpress).
Why not just use back-end?
Back-end previewing works well enough in most cases although it can be jumpy and slow if the blog post is very long. As an alternative, modalpreview automatically adds a preview button next to the submit button that brings up a modal window containing the textarea content, without reloading the entire page. It converts line breaks to <br> and removes the <script> tag to prevent hacking. Modalpreview can also strip HTML before rendering the preview.
Features
- Automatically adds preview functionality to any textarea inside a HTML form
- Cross-browser modular window with the textarea content rendered as HTML
- jQuery plugin - easy to implement
- Very useful in blog comments to avoid page loads
- No javascript styles - use your own CSS files to add style
- Tested in Safari 3, Firefox 2, MSIE 6, MSIE 7, Opera 9
Demonstrations
Try it out in the blog or have a look at our sample page
Usage
Modalpreview is a jQuery plugin. In order to use it you have to download the latest jQuery release and include both files in the <head> of your document.
In addition to the jQuery scripts, you'll also need to include the modalpreview.css file. So all in all, this should get you started:
<script src="jquery.js" type="text/javascript"></script>
<script src="jquery.modalpreview.js" type="text/javascript"></script>
<script type="text/javascript">
jQuery(function($){
var options = {}; // add your options in this object
$('form textarea').modalpreview(options);
});
</script>
<link rel="stylesheet" src="modalpreview.css" type="text/css">
Options
You can send some options to the plugin if you'd like to customize it a bit:
- fade - string or number (milliseconds) that controls fading speed, like 'fast','slow', etc. Set to '1' if you prefer not to fade the modular window.
- allowHtml - if false, modalpreview will strip the textarea content from HTML
- opacity - number from 0-1 that sets the background opacity (defaults to 0.7)
- text - Object where you can control all texts if you use other languages. Defaults:
{preview:'Preview',close:'Close'}
In addition to the jQuery options, you can also use CSS to style your preview window. Modalpreview comes with a default css file that contains fixes for IE and a simple, default style. You can easilly override these styles, f.ex if you want a white overlay or black preview box etc.
License
Just like all DevKick projecets, Modalpreview is licensed under the GPL licenses.
