1

我想在单击链接时弹出一个表单。

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

形式是这样的：

<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>

如何实现呢？

4

2 回答 2

3

把你包裹form在一个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>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​

还有一些 CSS：

​#form_wrapper {
    display:none;
}​

然后是一些使用 jQuery 的 JavaScript：

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

如果你真的是指弹出窗口，或者通常称为“模态”窗口，请看这里：http: //jqueryui.com/demos/dialog/#modal-form

于 2012-08-19T01:25:03.967 回答
1

弹出窗口是页面上的简单 div 元素，最初会隐藏，然后在发生某些事件时显示，例如鼠标单击。然后，您需要调整该 div 的外观，使其显示为用户的弹出窗口，即将 div 在页面上居中，提高其 z-index 使其分层，调整不透明度以提供调光效果，等等。显然，如果您决定自己动手，那么工作量很大。否则，如果您可以使用jquery，则可以利用jqueryui 对话框元素

于 2012-08-19T01:33:22.997 回答