Question

我正在尝试在页面上放置一个链接，该页面会弹出一个表单供用户通过电子邮件分享页面...

  <a href="javascript:function()"><img src="images/email.jpg"></a>

  <div id="tellfriend">
    <form id='tellafriend_form' method="post" onsubmit="return executeOnSubmit();"
    action="sharemail.php" name="tellafriend_form">
      <label for="name">Your Name:</label>
        <input class="std_input" type="text" id="name" name="name" size="40" maxlength="35" value="">
      <label for="to">Recipient's Email:</label>
        <input class="std_input" type="text" id="to" name="email" size="40" maxlength="35">
      <label for="message">Message:</label> 
      <textarea id="message" name="message" rows="18" cols="40">
message here</textarea>
        <input type="submit" onclick="javascript: pageTracker._trackPageview('/share/wf360');" name="submit" class="form_but" value="Submit">
    </form>
  </div><!-- #tellfriend -->

这是我正在使用的javascript（除了jQuery）：

<script> 
jQuery.fn.fadeToggle = function(speed, easing, callback) {
return this.animate({opacity: 'toggle'}, speed, easing, callback);  
};

$(document).ready(function() {
    $('#tellfriend').hide();
    $('a.email, #tellfriend a.close').click(function() {
    $("#tellfriend").fadeToggle('slow');
  });
}); 
</script>
<script type="text/javascript">
function executeOnSubmit()
{
alert('Email has been successfully sent. Thanks for sharing!');
}
</script>

我不确定为什么它不起作用：表格没有弹出。

Answer 1

答案：http://jsfiddle.net/morrison/f3Uy2/

备注：

使用jQuery中的fadeToggle()函数。

请注意对html的更改（如果您愿意，请忽略小猫）。

Answer 2

您似乎正在尝试替换现有的fadeToggle()功能。

此外，现有的fadeToggle()函数不接受'toggle'作为不透明度的值。引自jQuery API页面：

.fadeToggle（）的工作原理与.fadeOut（）和.fadeIn（）相同。像.fadeOut（）一样，.fadeToggle（）会在元素可见时淡出元素;像fadeIn（）一样，如果它们被隐藏，它将淡入元素。即使元素以不透明度0开头，如果它占据文档中的空间（即它具有高度或宽度），则不会将其视为隐藏。对于具有visibility：hidden的元素也是如此。您可以使用.fadeTo（）或.animate（）将元素从一个不透明度淡化到另一个不透明度而不影响其显示属性。但是，如果这样做，最初显示的元素：none将不会因为您为不透明度设置动画而变得可见。希望有所帮助。

因此，请尝试删除您在开头添加的功能，看起来代码的其余部分应该没问题。

<强>更新

在查看您的网站后，您似乎有两个jQuery副本，v1.4.2（没有fadeToggle()和v1.5.2确实拥有它。但是你正在加载v1.5.2之后许多其他脚本已经加载...因为这个问题我在“$ is not a function”的firebug上出错。因此，尝试用v1.5.2完全替换v1.4.2（第一个脚本标记）....得到萤火虫;）

实际上，脚本确实有效 - 但由于上述原因，其他脚本可能会被破坏。表单在第一个图像旁边的顶部弹出WAY。您需要将位置从绝对值更改为relative，并将CSS中的left调整为130px左右。

为什么不调用此函数？

2 个答案: