jQuery UI模态弹出窗口-按钮点击
jQuery UI Modal Popup Window - Button Click
我试图有我的注册按钮在一个形式导致模态窗口,这将显示用户的信息的输入。到目前为止,我有三个问题。
- 关闭模态窗口后,我的表单缺失
- 我想把模态窗口的"关闭"按钮重命名为"确认",如果可能的话
- 关闭(确认)模态窗口后,我想回到网页和表单是空的(没有以前的输入)
我的代码:
HTML - Form:
<div id="myForm">
<form name="myForm" method="POST">
<fieldset>
<legend>Register your interest</legend>
<div id="divpopup">
<p><label class="title" for="name">Your name:</label>
<input type="text" name="name" id="name"><br />
<label class="title" for="email">Your email:</label>
<input type="text" name="email" id="email"></p>
<label class="title" for="persons">Persons:</label>
<input id="personsId" type="text" name="persons" id="persons"></p>
<p><label for="location" class="title">Your closest center:</label>
<select class="target" name="location" id="location">
<option value="ny">New York</option>
<option value="il">Chicago</option>
<option value="ca">San Francisco</option>
</select></p>
<span class="title">Are you a member?</span>
<label><input type="radio" name="member" value="yes" /> Yes</label>
<label><input type="radio" name="member" value="no" /> No</label></p>
</div>
</fieldset>
<div class="submit" id="myButton"><input type="button" id="btnclick" value="Register" /></div>
</form>
<div class="quantity"></div>
</div>
SCRIPT - Modal Window:
<script type="text/javascript"> //register modal window
$(function() {
$("#btnclick").click(function() {
$("#divpopup").dialog({
title: "Your Input",
width: 500,
height: 500,
modal: true,
buttons: {
Close:
function() {
$(this).dialog('close');
}
}
});
});
})
</script>
您要做的是将表单克隆到对话框中。一旦他们确认,重置原始表单。像这样:
$("#btnclick").click(function() {
var dial = $("#myForm").clone();
dial.dialog({
modal: true,
draggable: false,
resizable: false,
position: ['center', 'top'],
show: 'blind',
hide: 'blind',
width: 400,
dialogClass: 'ui-dialog-osx',
buttons: {
"Confirm": function() {
$("#myForm").find("input").val("");
$(this).dialog("close");
}
}
});
});
http://jsfiddle.net/jessikwa/p5L20rxb/1/相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 如何调整信息窗口的大小并点击按钮?+更改信息窗口的内容
- 按下一个HTML按钮,该按钮使用一个功能在同一个新窗口中打开URL
- 如何在单击“提交”按钮时为“新建”窗口编写JavaScript,用“确定”和“取消”显示注册信息
- 如何在Ol3弹出窗口中添加用javascript创建的按钮上的点击事件
- 在窗口中单击按钮完成之前,光标不会停止.请继续卸载
- 如何隐藏谷歌地图Api 3中InfoBox窗口中的关闭(x)按钮
- 单击按钮时的窗口属性
- 打开'选择文件'窗口单击锚链接(跳过单击'选择文件'按钮)
- 在谷歌地图的信息窗口内点击按钮
- PHP使用子窗口中的单选按钮确定从子窗口向父窗口文本区域插入什么
- 通过javascript解析从按钮到输入的值.(嘟嘟的弹出窗口)
- 如何使用jquery关闭模态窗口,通过模拟模态's关闭按钮
- 表单按钮在同一窗口中打开新的URL
- 谷歌扩展:如何在弹出窗口中按下按钮时在我的javascript文件中运行函数
- 单击弹出窗口中的按钮后重定向到页面
- 如何在网格视图中每次单击按钮或链接时打开不同的新弹出窗口
- 如何在关闭该弹出窗口的弹出窗口上制作按钮
- Google+ 环聊按钮窗口位置
- 如何使用Jquery在浏览器中保存cookie时点击按钮窗口重新加载