Question

我一直致力于创建一个具有不同功能的弹出窗口。它被用作用户订阅我的网站的流行音乐。我添加了一个连接我的数据库的表单，这一切都很有效。我现在正在尝试添加一些自定义功能。

我正在尝试在弹出窗口的背景中添加一些叠加（淡化），以便我的主页在弹出窗口的背景中淡出
我需要在输入类型字段中添加（如果可能）以关闭我的表单。 *我在图片中添加了一个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;
}

正如您所看到的，我已经在'Overlay'CSCS中添加了，我只是不确定如何在我的弹出窗口中实现它以使功能正常工作。

此外，如果没有可用于关闭表单的输入类型（我无法找到），'close-image'CSS将用于关闭表单。我如何实现这是我的JavaScript ？

Answer 1

对于叠加层，将其定位：固定并将其放置在其他元素之外。你希望它被修复＆＃39;对于身体，所以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);

最好将close-image元素更改为ID，在本机JavaScript中更容易定位，并且该元素可能不需要是一个类。

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

1 个答案: