2016-04-02 14 views
0

これは私の問題です。私はjavascriptを使用してポップアップを作成した後、ユーザーに電子メールアドレスを要求するポップアップにHTMLフォームを挿入しました。どうすれば私はそれを作ることができますので、ポップアップが閉じると送信ボタンが押されている電子メールを格納する私のPHPスクリプトを実行する(送信ボタンをHTMLで作られた)送信する?ここでHTMLフォーム送信ボタン閉じるjavascriptを使用してポップアップ

は私のコードです:

また

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スクリプトでフォームを作ったことができると理解していますが、私はこのようにすることができることを願っています。

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

U:uは機能を作ることができ、たとえば

+0

このポップアップは開いたままにしておき、ページ全体をポストしたくないと仮定すると、Ajaxを使用して、クリックしたときに送信ボタンがページをポストするのを防ぐ必要があります。 – derloopkat

答えて

0

uはポップアップdivの下に 右方向にUを入れているを非表示にするには、いくつかのJavaScriptコードを使用する必要があります...

onSubmitイベント

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

それを呼び出すことができますuがallso入力値をチェックして、ポストの前にユーザーに警告し、ポップアップを閉じることができます。

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

と関数は、関数がfalseを返した場合、フォームは投稿しないだろう。この場合、この

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

のようになります。

また、u投稿の場合、ブラウザはフォームのターゲットページを読み込むことに注意してください。これを避けるために、多分あなたはXMLHttpRequest()を使うことができます。

+0

これは多くの助けていただきありがとうございます! – DolbyOver

関連する問題