i'd like to pop up a form when click a link.

<a title='%s' onclick='return popupform()'  href='#'> ABC </a>

the form is like:

<form id="contactus" action="javascript:submit_form()" method="post" accept-charset="UTF-8">
<input type="hidden" name="submitted" id="submitted" value="1">
    <label for="chinese">Chinese: </label><br>
    <input type="text" name="cs" id="cs" value="" maxlength="50"><br>
<label for="english">English:</label><br>
    <input type="text" name="en" id="en" value="" maxlength="50"><br>
    <input type="submit" name="Save" value="Save">
    <input type="submit" name="Delete" value="Delete">
    <input type="submit" name="Add" value="Add">
    <input type="submit" name="Close" value="Close">
</form>

how to achieve it?

i'd like to pop up a form when click a link.

<a title='%s' onclick='return popupform()'  href='#'> ABC </a>

the form is like:

<form id="contactus" action="javascript:submit_form()" method="post" accept-charset="UTF-8">
<input type="hidden" name="submitted" id="submitted" value="1">
    <label for="chinese">Chinese: </label><br>
    <input type="text" name="cs" id="cs" value="" maxlength="50"><br>
<label for="english">English:</label><br>
    <input type="text" name="en" id="en" value="" maxlength="50"><br>
    <input type="submit" name="Save" value="Save">
    <input type="submit" name="Delete" value="Delete">
    <input type="submit" name="Add" value="Add">
    <input type="submit" name="Close" value="Close">
</form>

how to achieve it?

• javascript
• html

• i suggest you to use jquery-ui dialog. – KoU_warch Commented Aug 19, 2012 at 1:23
• fancybox would be another jQuery plugin that could achieve this, a bit more lightweight imo. Or you could write verything from scratch with jQuery and css, should not be that hard... What have you tried so far? – Pevara Commented Aug 19, 2012 at 1:27

2 Answers 2

Wrap your form in a div:

<a title="%s" class="show_form" href="#"> ABC </a>

<div id="form_wrapper">
    <form id="contactus" action="javascript:submit_form()" method="post" accept-charset="UTF-8">
    ... truncated for brevity
    </form>
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

And some CSS:

​#form_wrapper {
    display:none;
}​

And then some JavaScript using jQuery:

$('a.show_form').on('click', function() {
    $('#form_wrapper').show();
});​​​​​

And if you really mean a popup window, or monly called a "modal" window, look here: http://jqueryui./demos/dialog/#modal-form

Pop-ups are simple div elements on the page that would be initially hidden and then revealed when some event takes place, like a mouse click. You then need to adjust the look of that div so it appears as a pop-up to the user, i.e. center the div on the page, raise its z-index so it layers above all, adjust the opacity to give the dimming effect, and so on. Obviously it is a lot of work if you decide to roll your own. Otherwise, if you are OK with using jquery, you can take advantage of the jqueryui dialog element