我使用这些库:
<link rel="stylesheet" href="http://code.jquery.com/mobile/latest/jquery.mobile.css">
<script src="http://code.jquery.com/jquery-1.9.0.min.js"></script>
<script src="http://code.jquery.com/mobile/latest/jquery.mobile.js"></script>
而且我有一个隐藏的表单,只有在我单击按钮时才会显示。但我无法关闭它。
我在 Internet 上找到了这个示例,并尝试在我的页面中实现它。
需要帮助,我尝试了很多,但没有任何效果。
这是我的代码:
<div id="login-box" class="login-popup">
<a href="#" class="closest"><img src="icon/close_pop.png" class="btn_close" title="Close Window" alt="Close" /></a>
<form method="post" class="signin" action="#">
<legend>Contacto</legend>
<fieldset class="textbox">
<label class="Nome">
<span>Nome</span>
<input id="nome" name="nome" value="" type="text" autocomplete="on" placeholder="Nome">
</label>
<label class="Email">
<span>Email</span>
<input id="email" name="email" value="" type="email" placeholder="nome@dominio.com">
</label>
<label class="Mensagem">
<span>Mensagem</span>
<textarea rows="20" cols="56" name="mensagem" id="comment" id="mensagem" placeholder="A sua mensagem..."></textarea></label>
<button type="submit" class="submitbutton" style="width:80px;height:30px">Enviar</button>
</fieldset>
</form>
</div>
<script type="text/javascript">$(document).ready(function() {
$('a.login-window').click(function() {
//Getting the variable's value from a link
var loginBox = $(this).attr('href');
//Fade in the Popup
$(loginBox).fadeIn(300);
//Set the center alignment padding + border see css style
var popMargTop = ($(loginBox).height() + 24) / 2;
var popMargLeft = ($(loginBox).width() + 24) / 2;
$(loginBox).css({
'margin-top' : -popMargTop,
'margin-left' : -popMargLeft
});
// Add the mask to body
$('body').append('<div id="mask"></div>');
$('#mask').fadeIn(300);
return false;
});
// When clicking on the button close or the mask layer the popup closed
$('a.close, #mask').live('click', function() {
$('#mask , .login-popup').fadeOut(300 , function() {
$('#mask').remove();
});
return false;
});
});
</script>