将叠加层添加到弹出窗口并添加输入类型字段以退出表单

Question

I have been working on creating a popup with some different functionality. It is being used as a pop for users to subscribe to my website. I have added in a form connected my DB, which is all working great. I am now trying to add some custom features.

1. I am trying to add some overlay (faded) to my background of the popup so my homepage is faded out in the background of the popup

2. I need to add in a input type field (if possible) to close my form. * I have added in a image with a X, if there is not input type option I will use this to exit the form

Here is my code:

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;
}

As you can see I have added in the 'Overlay' CSS already, I just am not sure how to implement this in my popup to make the functionality work.

Also, the 'close-image' CSS will be used to close the form if their is no input type available to close the form (which I haven't been able to find), How do I implement this is my JavaScript?

Answer 1

1. For the overlay, give it position: fixed and place it outside of your other elements. You want it to be 'fixed' to the body, so with 100% height and width it'll cover the full page, effectively.

Just build your overlay/ form to look how you want - with all elements visible, then handle the show/ hide afterwards in your JavaScript.

2. To close the form, just have a click handler to hide both the form and the overlay when the given element is clicked. See a brief example:

    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); 

It may be better to change the close-image element to be an ID instead, it's easier to target in native JavaScript, and the element probably doesn't need to be a class anyway.