javascript html 链接 onclick 弹出一个表单
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12023487/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
html link onclick pop up a form
提问by whi
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?
如何实现呢？
回答by tptcat
Wrap your formin a div:
将你的包裹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>????????????????????????????????
And some CSS:
还有一些CSS：
?#form_wrapper {
display:none;
}?
And then some JavaScript using jQuery:
然后是一些使用 jQuery 的 JavaScript：
$('a.show_form').on('click', function() {
$('#form_wrapper').show();
});?????
And if you really mean a popup window, or commonly called a "modal" window, look here: http://jqueryui.com/demos/dialog/#modal-form
如果你真的是指一个弹出窗口，或者通常称为“模态”窗口，请看这里：http: //jqueryui.com/demos/dialog/#modal-form
回答by Hazem Salama
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 dialogelement
弹出窗口是页面上的简单 div 元素，最初会隐藏，然后在发生某些事件（例如鼠标单击）时显示。然后，您需要调整该 div 的外观，使其向用户显示为弹出窗口，即，将 div 置于页面中央，提高其 z-index 使其最重要，调整不透明度以提供调光效果，等等。显然，如果您决定自己动手，那将需要做很多工作。否则，如果您可以使用jquery，则可以利用jqueryui 对话框元素
