[英]jQuery Hide & Show Form
我創建了一個鏈接,當點擊彈出窗口並顯示“聯系表單”時。 它可以打開,驗證,提交和發送電子郵件。 當我嘗試關閉表單時,我遇到了問題。
HTML
<div id="blanket"><div id="myForm">
<p style="text-align:right; margin: 0; padding: 0;"><a href="#" id="close" onClick="onClickClose();">Close</a></p>
<table width="400" border="0" cellspacing="0" cellpadding="5"><tr><td>
<form name="form1" method="POST" action="_sendmail.php" onSubmit="return CheckAll(this);">
<input name="fieldnm_1" type="radio" value="M." /> M.
<input name="fieldnm_1" type="radio" value="Mme" /> Mme.
</td></tr><tr><td width="400">
<input name="fieldnm_2" type="text" id="left_form" placeholder="Prénom *" tabindex="1"/><input name="fieldnm_4" type="text" id="right_form" placeholder="Courriel *" tabindex="3"/>
</td></tr><tr><td width="400">
<input name="fieldnm_3" type="text" id="left_form" placeholder="Nom *" tabindex="2"/>
<input name="fieldnm_5" type="text" id="right_form" placeholder="Téléphone *" tabindex="4"/>
</td></tr><tr><td width="400">
<select name="fieldnm_7" id="left_list" >
<option value="">Nombre de chambres *</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<select name="fieldnm_8" id="right_list">
<option value="">Nombre de pieds carrés</option>
<option value="600-800">600-800</option>
<option value="800-1000">800-1000</option>
<option value="1000-1250">1000-1250</option>
<option value="Plus de 1250">Plus de 1250</option>
</select>
</td></tr><tr><td>
<textarea name="fieldnm_9" id="comment" placeholder="Commentaire*" tabindex="5"></textarea>
</td></tr><tr><td>
<input type="submit" name="Submit" value="Soumettre" tabindex="6">
<input type="reset" name="Submit2" value="Reset">
</td></tr></table></form></div>
</div>
JS
<script type="text/javascript">
onClickRegister = function(){
b = $("#blanket");
b.css("display","block");
b.css("position","fixed");
b.css("width", window.innerWidth);
b.css("height", window.innerHeight);
b.css("background-color", "rgba(0, 0, 0, 0.7)");
f=$("#myForm");
f.css("position", "fixed");
f.css("top", "33%");
f.css("left", "33%");
}
window.onResize(function(){
if($("#blanket").length>0){
b.css("width", window.innerWidth);
b.css("height", window.innerHeight);
}
});
onClickClose = function(){
$("#blanket").css("display","none");
}
</script>
我甚至嘗試過向onClickClose添加警報,但沒有任何反應。
您可以使用:
function onClickClose(){
$("#blanket").hide();
}
*如果您不希望JQuery在其緩存中保存稍后要恢復的顯示屬性的值(如此處所述 ),您可以使用:
function onClickClose(){
$("#blanket").css("display","none");
}
$("#close").click(function() {
$("#blanket").hide();
});
實際上,問題不onClickClose
,而是在此之前的window.onResize()
。 它應該是window.onresize
,沒有camel-case,它不是一個函數,而是一個事件處理程序。 你應該擁有什么
window.onresize = function () {
if ($("#blanket").length > 0) {
b.css("width", window.innerWidth);
b.css("height", window.innerHeight);
}
};
您使用它的方式是導致錯誤,隨后onClickClose
函數未被解析。 在MDN上閱讀所有相關內容。
PbxMan的答案起作用的原因是因為吊裝。 通過從函數表達式一個函數聲明進行更改,該功能被提升到范圍的頂部,所以沒有錯誤前得到解析。 因此,雖然它有效,但它實際上是在踩踏實際問題。
Angus Croll在函數聲明與函數表達式和提升方面有很好的關系。
$('#close').click(
function(abc){
$("#blanket").css("display","none");
abc.preventDefault(); // this will cancel the default action for href
}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.