將Overlay添加到彈出框並添加輸入類型字段以退出表單

我一直在創建具有某些不同功能的彈出窗口。它被用作用戶訂閱我的網站的流行音樂。我已經添加了一個連接我的數據庫的表單，這一切都很好。我現在試圖添加一些自定義功能。將Overlay添加到彈出框並添加輸入類型字段以退出表單

我想一些重疊（淡出）添加到我的彈出窗口的背景，使我的主頁時，在彈出的
我需要在輸入類型字段中添加的背景（淡出如果可能的話）關閉我的表單。 *我一個圖像中已經添加了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的？

來源

2016-04-28 mrProgrammer

對於覆蓋層，給它的位置：固定並放置在其他元素之外。你希望它能夠「固定」在身體上，所以100％的高度和寬度能夠有效地覆蓋整個頁面。

只需構建您的覆蓋圖/表單以查看您想要的方式 - 所有元素都可見，然後在JavaScript中處理顯示/隱藏。

要關閉表單，只需單擊處理程序即可在單擊給定元素時隱藏表單和疊加層。見一個簡單的例子：

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的目標，而元素可能並不需要是反正一個班。

來源

2016-04-28 16:50:11 n9nome

將Overlay添加到彈出框並添加輸入類型字段以退出表單

回答

相關問題