ポップアップにオーバーレイを追加し、入力フィールドを追加してフォームを終了する

Question

私は、いくつかの異なる機能を備えたポップアップの作成に取り組んでいます。私のウェブサイトを購読するためのポップとして使用されています。私は私のDBに接続されたフォームを追加しました。これはすごく効果的です。私は今いくつかのカスタム機能を追加しようとしています。

1. 私は（私は入力タイプフィールドに追加する必要が私のホームページをポップアップ

2. の背景にフェードアウトされるようにポップアップの私の背景にいくつかのオーバーレイ（色あせ）を追加しようとしています可能であれば）私のフォームを閉じる。 *私は、入力タイプオプションがない場合、私はここで、フォーム

を終了するには、これを使用しますが、Xと画像に追加している私のコードです：

はJavaScript：

<script> 
function PopUp(hideOrshow) { 
    if (hideOrshow == 'hide') { 
     document.getElementById('ac-wrapper').style.display = "none";  
    } 
    else if(localStorage.getItem("popupWasShown") == null) { 
     localStorage.setItem("popupWasShown",1); 
     document.getElementById('ac-wrapper').removeAttribute('style'); 

    } 
} 

window.onload = function() { 
    setTimeout(function() { 
     PopUp('show'); 
    }, 0); 
} 


function hideNow(e) { 
    if (e.target.id == 'ac-wrapper') document.getElementById('ac-wrapper').style.display = 'none'; 
} 

HTML：

<div id="ac-wrapper" style='display:none' onClick="hideNow(event)"> 
<div id="popup"> 
<img alt="#" class="close-image" src="Assets/images/Deep_Close.png" /> 

<form name="Mail_list" action="save.php" method="post"> 
<br/> 
<h4>Subscription</h4> 
<br/> 
    <div class="form-group"> 
     <label for="first_name">First Name: </label> 
     <input type="text" name="first_name" id="first_name" size="25" placeholder="First Name" autofocus required /> 
    </div> 
    <div class="form-group"> 
     <label for="last_name">Last Name: </label> 
     <input type="text" name="last_name" id="last_name" size="25" placeholder="Last Name" required /> 
    </div> 
    <div class="form-group"> 
     <label for="email">User Email: </label> 
     <input type="text" name="email" id="email" size="25" placeholder="Email" required /> 
    </div> 
    <br/><br/> 
    <input type="submit" value="Submit Form"> 
    <input type="reset" value="Reset Form">    
</form> 

CSS：

#ac-wrapper { 
position: fixed; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
z-index: 1001; 
} 

#popup{ 
position:absolute; 
display:hidden; 
top:300px; 
left:50%; 
width:500px; 
height:auto; 
margin-left:-250px; 
background-color:white; 
z-index:6; 
padding:20px; 
border:solid 5px #333333; 
border-radius:5px; 
} 

#overlay-back { 
position: absolute; 
top: 0; 
left: 0; 
width: 100%; 
height: 100%; 
background: #000; 
opacity: 0.6; 
filter: alpha(opacity=60); 
z-index: 5; 
display: none 
} 

.close-image{ 
display: block; 
float:right; 
position:relative; 
top:-15px; 
right: -15px; 
height: 20px; 
} 

あなたは私はすでに「オーバーレイ」CSSに追加している見ることができるように、私はちょうど機能を動作させるために私のポップアップでこれを実装する方法を確認していません。

フォームを閉じるための入力タイプがない場合は、フォームを閉じるために「close-image」CSSが使用されます（これは私が見つけることができませんでした）。 JavaScript？

Answer 1

1. オーバーレイの場合は、固定して他の要素の外側に配置します。あなたはそれが身体に「固定」されることを望んでいるので、100％の高さと幅で全ページを効果的にカバーします。

すべての要素が表示されている状態で、JavaScriptを表示/非表示にしたい場合は、オーバーレイ/フォームを作成してください。

2. フォームを閉じるには、特定の要素がクリックされたときにフォームとオーバーレイの両方を非表示にするクリックハンドラを用意するだけです。簡単な例を参照してください：

   var closeImage = document.getElementById('close-image'); 
   var overlay = document.getElementById('overlay-back'); 
   var formWrapper = document.getElementById('ac-form-wrapper'); 
   
   // Hide the elements & do other stuff you may want.. 
   function hide() { 
       overlay.style.display = "none"; 
       formWrapper.style.display = "none"; 
   } 
   
   // Call this whenever you want to show stuff. 
   // In this case, it would go inside the setTimeout 
   // function also. 
   function show() { 
       overlay.style.display = "block"; 
       formWrapper.style.display = "block"; 
   } 
   
   // Click handler for the image element. 
   closeImage.addEventListener("click", function() { 
       hide(); 
   }, false); 
   

IDの代わりに、それはネイティブJavaScriptでターゲットにする方が簡単ですように近接画像要素を変更するには良いかもしれ、および要素が多分にある必要はありません。とにかくクラス。