Modalpreview - Preview Your Comment in a Modal Window

Some people have asked me about the comment preview functionality that DevKick is using in the blog, so I made it into a handy jQuery plugin called Modalpreview.

I got the idea when was looking for a quick way of adding a preview function to the comment form here on DevKick. I wanted something new and did not want to go server-side. I never liked the live preview thing, mainly because I don’t like when stuff happens on the page automatically when I press a key. So I thought, why not just use a modal window to present the textarea as HTML before submitting the form?

That would prove to be a lot harder than it sounds like.

The first problem: fixed positioning in IE

Modal windows would be really easy to implement if it wasn’t for the fact that IE6 is lacking support for position: fixed. Fortunately, I found some expressions that works well enough for producing modal windows, but the vertical centering is still buggy. That’s ok though, we can always specify a top margin for IE from the modal window up to the browser edge. Anyway, here is the key for adding position:fixed to IE:

top:expression(
    ((ignoreMe = document.documentElement.scrollTop ?
    document.documentElement.scrollTop :
    document.body.scrollTop)) + 'px'
);
right:expression(
    ((ignoreMe2 = document.documentElement.scrollLeft ?
    document.documentElement.scrollLeft :
    document.body.scrollLeft)) + 'px'
);

Second problem: IE’s stacking order

I wanted to append the preview div inside the form element to integrate form functionality, but IE said no. IE has it’s own z-index order that I never understood and I believe it’s some crazy relative logic depending on the nearest positioned ancestor etc. So trying to break out the preview div from the form falied miseably in IE, since it was impossible to place it above the overlay and position it fixed in the body center. This is the main reason why I couldn’t have a submit form button inside the preview division, wich leads us to the next problem:

Third problem: the submit() function

I really, really wanted to clone the form’s submit button and append it to the preview division to add a ’submit form’ button under the previewed text. But in order to do that properly, the preview division needed to stay inside the form tag. That proved to be impossible in IE6 as described earlier, so the other option was to add a simple submit() function to a button.

That could have worked, but since many form elements already use the name="submit" attribute, it will effectively disable the integrated submit() function in javascript. Not even a $('form *[name=submit]').attr('name','_submit') would work, since IE maps the form before DOM ready. So no go there.

The result

In the end, I came up with a cross-browser alternative that works pretty good, even if the modal window can’t submit the form. The overlay and preview division is appended to the body in order to always stay on top and centered. I resorted to a simple close button, which is fine since you might want to have a last look to see if you filled in all the other required form fields. You can see it in action just here below.

When dealing with stuff like z-index, fixed positioning and modal windows, IE is a real pain. If any of you can find a cross-browser solution for submitting the form inside the modal window, you would be my hero.

Links:

• Modalpreview
• Modalpreview Demo
• modalpreview.js source
• modalpreview.css source