html链接onclick弹出一个表单
html link onclick pop up a form
我想在单击链接时弹出一个表单。
<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>
如何实现?
将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-表单
弹出窗口是页面上的简单div元素,最初会被隐藏,然后在发生某些事件时显示出来,比如鼠标单击。然后,您需要调整div的外观,使其在用户面前显示为弹出窗口,即将div放在页面的中心,提高其z索引,使其分层,调整不透明度以产生调光效果,等等。显然,如果您决定自己滚动,需要做很多工作。否则,如果您可以使用jquery,则可以利用jqueryui对话框元素
相关文章:
- jquery mobile上多个页面上的一个表单
- 循环遍历包含另一个表单的表单
- 如何在javascript转换编码中将一个动态值从一个表单添加到另一个页面
- 我确实有一个表单,如果用户输入了输入,它应该检查否定或空的输入框,并抛出一条警告消息
- 如何通过 JS 将内容从一个表单中的一个文本框复制到另一个表单中的另一个文本框
- Slding表单不会一次显示一个表单
- html链接onclick弹出一个表单
- 使用 javascript 将值从一个表单传递到另一个表单
- 当在一个表单中进行更改时,ng-disabled 会触发所有表单验证
- 如何将一个表单中的项目添加到 Rails 中另一个表单的下拉选项
- 如何在一个表单标记中验证多个字段集
- 如何从一个表单的输入字段中获取数据,并使用JQuery在不同的表单中填充相同的输入类型
- 在PHP中将下拉选择列表的内容从一个表单传递到另一个表单
- 一个表单包含多个提交操作
- Javascript-更正用户名和密码以启用另一个表单
- 在ul后面添加一个表单
- angular js如何在提交一个表单时验证另一个表单
- 如何将某些HTML从一个页面转换为另一个表单
- 使用JavaScript将数据从一个表单显示到另一个页面
- 两个表单,一个选择/下拉框-需要将选择值从一个表单复制到另一个表单