Question

这是我的问题。我使用javascript构建了一个弹出窗口，然后在弹出窗口中插入一个HTML表单，询问用户的电子邮件地址。如何按下提交（按钮是用html制作）弹出窗口关闭，按下提交按钮将执行我存储电子邮件的PHP脚本？

这是我的代码：

var moveForce = 15; // max popup movement in pixels
var rotateForce = 10; // max popup rotation in deg

$(document).mousemove(function(e) {
  var docX = $(document).width();
  var docY = $(document).height();

  var moveX = (e.pageX - docX / 2) / (docX / 2) * -moveForce;
  var moveY = (e.pageY - docY / 2) / (docY / 2) * -moveForce;

  var rotateY = (e.pageX / docX * rotateForce * 2) - rotateForce;
  var rotateX = -((e.pageY / docY * rotateForce * 2) - rotateForce);

  $('.popup')
    .css('left', moveX + 'px')
    .css('top', moveY + 'px')
    .css('transform', 'rotateX(' + rotateX + 'deg) rotateY(' + rotateY + 'deg)');
});

<div class="moving-zone">
  <div class="popup">
    <div class="popup-content">
      <div class="popup-text">
        <h2>Subscribe to hear about our special offers!</h2>
        <form method="post" action="contact.php" name="contactform" id="contactform">

          <fieldset>
            <input name="email" type="text" id="email" size="30" placeholder="Email Address">
          </fieldset>

          <fieldset>
            <button type="submit" class="btn btn-lg" id="submit" value="Submit">Submit</button>
          </fieldset>
        </form>
      </div>
    </div>
  </div>
</div>

另外，当用户点击弹出窗口时弹出窗口会自动关闭，或者如何放置X以退出弹出窗口，我怎么能这样做呢？

谢谢！我知道我可以在java脚本中制作表单，但我遇到了冲突，所以我希望我能这样做。

Answer 1

你需要使用一些javascript代码来隐藏弹出div 下面是把你放在正确的方向......

例如，你可以创建一个函数：

function hidepopup()
    {
        document.getElementsByClassName('popup').item(0).style.display = 'none';
    }

你可以在onsubmit事件中调用它

<form name="test" method="post" onSubmit="hidepopup()">
....
elements
....
</form>

你可以在发布和关闭弹出窗口之前检查输入值并提醒用户：

<form name="test" method="post" onSubmit="return hidepopup()">
....
elements
....
</form>

，功能就像这样

function hidepopup()
    {
        if (check here if input values are NOT ok)
        {
            return false;
        }
        else
        {document.getElementsByClassName('popup').item(0).style.display = 'none';}
    }

在这种情况下，如果函数返回false，则表单不会发布。

请注意，如果您发布，浏览器将加载表单的目标页面。为了避免这种情况，也许你可以使用XMLHttpRequest（）。

HTML表单使用javascript提交按钮关闭弹出窗口

1 个答案: