![](/img/trans.png)
[英]Uservoice Javascript widget - How to popup feedback form automatically on page load
[英]how to popup a form on page load?
我希望在特定页面上弹出登录表单。
<a id="test" href="#login_form">Click me</a>
<div style="display:none">
<form id="login_form" method="post" action="parse_login.php">
<p id="login_error">Please login</p>
<table>
<tr><td><input type='text' name='username' placeholder="username" style="width: 250px;" /><p /></tr></td>
<tr><td><input type='password' name='password' placeholder="password" style="width: 250px;" /><p /></tr></td>
</table>
<div class="logginbutton"><button type='submit' name='submit' class="button-small">Login</button>
</form>
</div>
而JS如下:
$("#test").fancybox({
'scrolling' : 'no',
'titleShow' : false,
'onClosed' : function() {
$("#login_error").hide();
}
});
$("#login_form").bind("submit", function() {
if ($("#username").val().length < 1 || $("#password").val().length < 1) {
$("#login_error").show();
$.fancybox.resize();
return false;
}
$.fancybox.showActivity();
return false;
});
我想要的是,表单应该在页面加载而不是onclick上弹出,并且应该一直停留到访问者登录为止,因此需要摆脱关闭标志。
尝试
jQuery(document).ready(function ($) {
$.fancybox({
href: "#login_form",
modal: true,
scrolling : 'no',
titleShow: false,
onClosed : function() {
$("#login_error").hide();
}
});
});
它将在页面加载时启动fancybox。
注意 : modal: true
将阻止关闭fancybox,并且不会显示关闭按钮 ( 转义或在框外单击也不会将其关闭)如果将关闭按钮置于框内(绑定到a $.fancyblox.close()
方法)或表单通过验证并提交。
在这种情况下,您应该从此脚本中删除return false
$("#login_form").bind("submit", function() {
if ($("#username").val().length < 1 || $("#password").val().length < 1) {
$("#login_error").show();
$.fancybox.resize();
return false; // prevents the form of being submitted if validation fails
}
// $.fancybox.showActivity(); // you don't need this unless you are going to display the results in fancybox
// return false; // <== this will prevent the form of being submitted, regardless it passes the validation
});
请注意 ,这是针对fancybox v1.3.4的(由于您在帖子中使用了API选项,因此我假设您使用的是该版本)
编辑 :好的,我为您做到了,请参阅JSFIDDLE
我什至更正了您的html小错误,例如
<a id="test" href="#login_form">Click me</div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.