[英]Using jQuery to unhide a div by clicking on a link
for this I am using colorbox jQuery plugin http://colorpowered.com/colorbox/ and a form. 为此,我正在使用colorbox jQuery插件http://colorpowered.com/colorbox/和一个表单。 I am trying to use jQuery colorbox to unhide a div
containing a form and show it in the colorbox when I click on the relevant links below. 我正在尝试使用jQuery colorbox取消隐藏包含表单的div
,并在单击以下相关链接时将其显示在colorbox中。
This is the javascript in the header I use: 这是我使用的标头中的javascript:
$(document).ready(function() {
$('#password_reset').ajaxForm({
success: showResponse,
clearForm: 'true'
});
function showResponse(responseText, statusText) {
$('#password_reset').hide();
$('#formStatus').html(responseText);
};
$().bind('cbox_open', function() {
$('#password_reset').show();
$('#formStatus').html('');
});
$(".inline").colorbox({
width: "300px",
height: "250px",
inline: true,
href: "#password_change"
});
});
This is the link I have that is supposed to run my javascript code (above) and unhide the div below and run it into colorbox: 这是我应该运行我的javascript代码(上面)并取消隐藏下面的div并将其运行到colorbox中的链接:
<a href="javascript:showResponse">Password Reset</a>
This is my hidden div: 这是我隐藏的div:
<div style="visibility: hidden;">
<div id='password_change' style="padding:10px; background:#fff;">
<strong>Change your password</strong><br /><br />
<form id="password_reset" action="password_reset.php" method="post">
<input type="hidden" name="Method" value="updatePassword" />
Password: <br />
<input type="password" name="password1" />
<br />
<br />
Verify Password: <br />
<input type="password" name="password2" />
<br />
<input type="submit" value="Update" />
</form>
<div id="formStatus"></div>
</div>
</div>
Hopefully someone can tell me how I can get this working as I am completely stuck and I know it's a small error I am making here but I can't figure it out. 希望有人能告诉我如何将其完全卡住,而且我知道这是我在这里犯的一个小错误,但我不知道该如何解决。 Please help? 请帮忙?
griegs' answer is half way there. griegs的答案在那儿。 jQuery's show & hide on a div element is equivalent of display:block; jQuery在div元素上的显示和隐藏等同于display:block; and display:none; 并显示:无; so it should be like this: 所以应该是这样的:
<div id="DIV_password_reset" style="display:none;">
$('#DIV_password_reset').show();
If you want to use visibility, do the following: 如果要使用可见性,请执行以下操作:
<div id="DIV_password_reset" style="visibility:hidden;">
$('#DIV_password_reset').css('visibility', 'visible');
<div id="DIV_password_reset" style="visibility: hidden;">
$('#DIV_password_reset').show();
Your setting the visibility of the form and not the div. 您设置表单的可见性,而不是div。
I think you need something like this using jQuery: 我认为您需要使用jQuery这样的东西:
jQuery(document).ready(function(){
jQuery('.show').live('click', function(event) {
$("#yourDivId").attr({style: "visibility: show;"});
});
});
Check on jsfiddle.net 检查jsfiddle.net
More Info: 更多信息:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.