Question

我用一个按钮（“descrição”）创建了这个应用程序，打开一个带有一个文本框和两个按钮的“灰色背景”： “salvar”（保存按钮）和“取消”（取消按钮），只有在框内输入内容或点击“取消”时才能保存并关闭它，这是第一次完美运行，但是当你重新开始时它不会打开按钮或文本框，而是保留在“灰色背景”上。

我还是HTML，CSS和JS的新手。

$('#headerR').on('click', function() {
    $('#overlay, #overlay-back').fadeIn(500);
    $(".text-hidden").toggleClass("text");
    $(".saving").toggleClass("myButton");
    $(".canceling").toggleClass("myButton");
});



function validation() {

    if (document.getElementById("desc").value == null || document.getElementById("desc").value == "") {
        alert("Preencha a Descrição!");
    } else {
        $(function() {
            $("#save").click(function() {
                $(".text-hidden").toggleClass("text");
                $('#overlay, #overlay-back').fadeOut(500);
            });
        });
    }

}

html, body {
    width: 100%;
    height: 100%;
}

#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;
}

#overlay {
    position: absolute;
    top: 10;
    left: 50;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: none;
}

.text-hidden {
    transform: scaleX(0);
    transform-origin: 0% 40%;
    transition: all .7s ease;
    width: 0px;
    height: 0px;
    top: 50%;
    left: 50%;
}

.saving {
    transform: scaleX(0);
    transform-origin: 0% 40%;
    transition: all .9s ease;
    height: 1px;
    position: absolute;
    top: 90%;
    right: 8%;
    background: Green;
    color: white;
}

.canceling {
    transform: scaleX(0);
    transform-origin: 0% 40%;
    transition: all .9s ease;
    height: 1px;
    position: absolute;
    top: 90%;
    left: 5%;
    background: Red;
    color: white;
}

.text {
    transform: scaleX(1);
    width: 300px;
    height: 150px;
    position: absolute;
    top: 20%;
    left: 37%;
}

.myButton {
    transform: scaleX(1);
    width: 80px;
    height: 80px;
}

<p>
  <button id="headerR" type="button">Descrição</button>
</p>
<div id="overlay-back"></div>
<div id="overlay">
  <span><script src=
  "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
  type="text/javascript">
</script> 
  <textarea id="desc" type="textarea" class="text-hidden">
</textarea> <button id="save" class="saving" onclick=
"validation();"><span><span>Salvar</span> <button id="cancel"
  class="canceling" onclick=
  "validation();">Cancelar</button></span></button></span>
</div>

Answer 1

如果您只想修复此错误，请尝试以下操作：

＆＃13;

$('#headerR').on('click', function() {
    $('#overlay, #overlay-back').fadeIn(500);
    $(".text-hidden").toggleClass("text");
    $(".saving").toggleClass("myButton");
    $(".canceling").toggleClass("myButton");
});



function validation() {

    if (document.getElementById("desc").value == null || document.getElementById("desc").value == "") {
        alert("Preencha a Descrição!");
    } else {
        $(function() {
            $(".text-hidden").toggleClass("text");
            $('#overlay, #overlay-back').fadeOut(500);
            $(".saving").toggleClass("myButton");
            $(".canceling").toggleClass("myButton");
        });
    }

}

＆＃13;

html, body {
    width: 100%;
    height: 100%;
}

#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;
}

#overlay {
    position: absolute;
    top: 10;
    left: 50;
    width: 100%;
    height: 100%;
    z-index: 10;
    display: none;
}

.text-hidden {
    transform: scaleX(0);
    transform-origin: 0% 40%;
    transition: all .7s ease;
    width: 0px;
    height: 0px;
    top: 50%;
    left: 50%;
}

.saving {
    transform: scaleX(0);
    transform-origin: 0% 40%;
    transition: all .9s ease;
    height: 1px;
    position: absolute;
    top: 90%;
    right: 8%;
    background: Green;
    color: white;
}

.canceling {
    transform: scaleX(0);
    transform-origin: 0% 40%;
    transition: all .9s ease;
    height: 1px;
    position: absolute;
    top: 90%;
    left: 5%;
    background: Red;
    color: white;
}

.text {
    transform: scaleX(1);
    width: 300px;
    height: 150px;
    position: absolute;
    top: 20%;
    left: 37%;
}

.myButton {
    transform: scaleX(1);
    width: 80px;
    height: 80px;
}

＆＃13;

<p>
  <button id="headerR" type="button">Descrição</button>
</p>
<div id="overlay-back"></div>
<div id="overlay">
  <span><script src=
  "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
  type="text/javascript">
</script> 
  <textarea id="desc" type="textarea" class="text-hidden">
</textarea> <button id="save" class="saving" onclick=
"validation();"><span><span>Salvar</span> <button id="cancel"
  class="canceling" onclick=
  "validation();">Cancelar</button></span></button></span>
</div>

＆＃13;

Answer 2

您需要更改JavaScript代码Fiddle

$('#headerR').on('click', function() {
  $('#overlay').fadeIn(500);
  $('#overlay-back').fadeIn(500);
});
$(function() {
  $("#save").click(function() {
    $('#overlay').fadeOut(500);
    $('#overlay-back').fadeOut(500);
  });
});


function validation() {
  if (document.getElementById("desc").value == null || document.getElementById("desc").value == "") {
    alert("Preencha a Descrição!");
  }
}

html,
body {
  width: 100%;
  height: 100%;
}
#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;
}
#overlay {
  position: absolute;
  top: 10;
  left: 50;
  width: 100%;
  height: 100%;
  z-index: 10;
  display: none;
}
.text-hidden {
  transform: scaleX(0);
  transform-origin: 0% 40%;
  transition: all .7s ease;
  width: 0px;
  height: 0px;
  top: 50%;
  left: 50%;
}
.saving {
  transform: scaleX(0);
  transform-origin: 0% 40%;
  transition: all .9s ease;
  height: 1px;
  position: absolute;
  top: 90%;
  right: 8%;
  background: Green;
  color: white;
}
.canceling {
  transform: scaleX(0);
  transform-origin: 0% 40%;
  transition: all .9s ease;
  height: 1px;
  position: absolute;
  top: 90%;
  left: 5%;
  background: Red;
  color: white;
}
.text {
  transform: scaleX(1);
  width: 300px;
  height: 150px;
  position: absolute;
  top: 20%;
  left: 37%;
}
.myButton {
  transform: scaleX(1);
  width: 80px;
  height: 80px;
}

<p>
  <button id="headerR" type="button">Descrição</button>
</p>
<div id="overlay-back"></div>
<div id="overlay"> <span><script src=
  "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"
  type="text/javascript">
</script> 
  <textarea id="desc" type="textarea" class="text">
</textarea> <button id="save" class="saving myButton" onclick=
"validation();"><span><span>Salvar</span> 
  <button id="cancel" class="canceling myButton" onclick="validation();">Cancelar</button>
  </span>
  </button>
  </span>
</div>

按钮启动应用程序，但不是两次

2 个答案: