Javascript 模态将不显示_Javascript_Html_Css

Javascript 模态将不显示

javascript html css

Javascript 模态将不显示,javascript,html,css,Javascript,Html,Css,我还有24秒就要沮丧地点燃我的内衣了本质上，我正在制作一个简单的联系人信息表单，将输入提交到外部PHP页面进行处理，并且，与此问题相关，在提交时弹出第二个模式，向用户确认表单已发送。当你按下“提交”按钮时，如何让表单保持在同一页上，这是另一天的问题；我不明白的是，当你点击“提交”按钮时，为什么第二个模式，即“感谢你的关注等”不会出现。这快把我逼疯了谢谢你的帮助，我是一名业余程序员，愿意接受任何和所有的建议/批评 <!DOCTYPE html> <html> <h

我还有24秒就要沮丧地点燃我的内衣了

本质上，我正在制作一个简单的联系人信息表单，将输入提交到外部PHP页面进行处理，并且，与此问题相关，在提交时弹出第二个模式，向用户确认表单已发送。当你按下“提交”按钮时，如何让表单保持在同一页上，这是另一天的问题；我不明白的是，当你点击“提交”按钮时，为什么第二个模式，即“感谢你的关注等”不会出现。这快把我逼疯了

谢谢你的帮助，我是一名业余程序员，愿意接受任何和所有的建议/批评

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>

<style>
    .modal {
    display: none;
    position: fixed;
    z-index: 1;
    overflow: scroll;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid;
    width: 95%;
    position: relative;
}

.modal2 {
    display: none;
    position: fixed;
    z-index: 1;
    overflow: scroll;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}

.modal2-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid;
    width: 95%;
    position: relative;
}
</style>

<button id="myButton">Contact</button>

<div id="myModal" class="modal">
    <div action="" class="modal-content">
        <span id="close">&times;</span>
        <p class="formHeader">Let's Work Together...</p>
        <p id="formSubheader">Name</p>
        <input type="type" name="firstName" placeholder="First" class="inputBox1">
        <input type="type" name="lastName" placeholder="Last" class="inputBox1">
        <p id="formSubheader">Email</p>
        <input type="email" name="email" placeholder="Example@Email.com" class="inputBox2">
        <p id="formSubheader">Phone</p>
        <input type="tel" name="phone" class="inputBox3" placeholder="###-###-####">
        <p id="formSubheader">Project Description</p>
        <textarea name="description" class="inputBox4"></textarea>
        <br>
        <button type="submit" id="myButton2">Submit</button>
    </div>
</div>

<div id="myModal2" class="modal2">
    <div class="modal2-content">
        <span id="close">&times;</span>
        <p class="formHeader2">Thank you for your interest. I will get back to you soon!</p>
    </div>
</div>

<script>
    var modal = document.getElementById("myModal");
    var modal2 = document.getElementById("myModal2");
    var btn = document.getElementById("myButton");
    var btn2 = document.getElementById("myButton2");
    var close = document.getElementById("close");

    btn.onclick = function() {
        modal.style.display = "block";
    }
    btn2.onclick = function() {
        modal.style.display = "none";
        modal2.style.display = "block";
    }
    close.onclick = function() {
        modal.style.display = "none";
    }
    window.onclick = function(event) {
        if (event.target == modal) 
            modal.style.display = "none";
            modal2.style.display = "none";
        }
    </script>
</body>
</html>


.莫代尔{
显示：无；
位置：固定；
z指数：1；
溢出：滚动；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心；
宽度：95%；
位置：相对位置；
}
.modal2{
显示：无；
位置：固定；
z指数：1；
溢出：滚动；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.4）；/*黑色w/不透明度*/
}
.modal2内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心；
宽度：95%；
位置：相对位置；
}
接触
&时代；
让我们一起努力
名称
电子邮件
电话
项目说明


提交
&时代；
感谢您的关注。我会很快给你回复的
var modal=document.getElementById（“myModal”）；
var modal2=document.getElementById（“myModal2”）；
var btn=document.getElementById（“myButton”）；
var btn2=document.getElementById（“myButton2”）；
var close=document.getElementById（“close”）；
btn.onclick=函数（）{
modal.style.display=“块”；
}
btn2.onclick=函数（）{
modal.style.display=“无”；
modal2.style.display=“块”；
}
close.onclick=函数（）{
modal.style.display=“无”；
}
window.onclick=函数（事件）{
如果（event.target==模态）
modal.style.display=“无”；
modal2.style.display=“无”；
}

您的问题在于这段代码：

    window.onclick = function(event) {
    if (event.target == modal) 
        modal.style.display = "none";
        modal2.style.display = "none";
    }

我不确定您打算用它做什么，但是请记住，如果

if

语句中没有提供大括号，那么只有

if

条件后面的行才会执行。您的第二行将始终执行。因此，您在每次单击事件时都有效地隐藏了

modal2

（因为您正在收听

window.onclick

）。我想你不想那样

例如：


.莫代尔{
显示：无；
位置：固定；
z指数：1；
溢出：滚动；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.4）；
/*黑色w/不透明度*/
}
.模态内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心；
宽度：95%；
位置：相对位置；
}
.modal2{
显示：无；
位置：固定；
z指数：1；
溢出：滚动；
宽度：100%；
身高：100%；
背景色：rgba（0,0,0,0.4）；
/*黑色w/不透明度*/
}
.modal2内容{
背景色：#fefe；
保证金：自动；
填充：20px；
边框：1px实心；
宽度：95%；
位置：相对位置；
}
接触
&时代；
让我们一起努力
名称
电子邮件
电话
项目说明


提交
&时代；
感谢您的关注。我会很快给你回复的
var modal=document.getElementById（“myModal”）；
var modal2=document.getElementById（“myModal2”）；
var btn=document.getElementById（“myButton”）；
var btn2=document.getElementById（“myButton2”）；
var close=document.getElementById（“close”）；
btn.onclick=函数（）{
modal.style.display=“块”；
}
btn2.onclick=函数（）{
modal.style.display=“无”；
modal2.style.display=“块”；
}
close.onclick=函数（）{
modal.style.display=“无”；
}
window.onclick=函数（事件）{
如果（event.target==模态）{
modal.style.display=“无”；
modal2.style.display=“无”；
}
}

谢谢！！该代码的想法是，如果你点击关闭其中一个模态，它们就会关闭。非常感谢你！！欢迎来到Stackoverflow@rilyp。为了帮助获得答案，我建议您将代码缩减到最小的可复制示例（请参阅）。这将使其他人更快地理解您的代码。此外，我建议添加当前的行为是什么，您期望什么（您已经在一定程度上做到了），以及您已经尝试了什么。