javascript - 如何使 标记关闭 div。

Question

在我不断寻找知识的过程中，我又一次遇到了我正在攀升卢布的墙。基本上我有这个 div 作为弹出窗口，我需要它来做一些有用的事情!但后来我决定将关闭按钮改成 Angular 落里的 X 来模拟浏览器的工作方式。

当我这样做时，我遇到了以下问题:

1.Div 打开但不关闭。2.div 内的按钮不起作用，这意味着它不会打开另一个带有确认的弹出窗口。

我把第二点的Js代码也删掉了，因为这让我很头疼。这是 HTML

<div class = "popUp" id="popUp">

        <a value="cerrar" id="btnCerrar">X</a>
            <ul>
              <li>Name: Item #1</li>
              <li>BLA/li>
              <li>BLA</li>
              <li>BLAr</li>
            </ul>

        <form class="display" name="opciones" method="get">
            <input type="submit" value="Modificar" id="btnModificar" />

            <input type="submit" value="Eliminar" id="btnEliminar" />
        </form>

    </div>


    <div class = "popUp" id="popUp">

        <a value="cerrar" id="btnCerrar">x</a>
            <p>Ypu sure, it will be deleted for good?</p>
            <p>Delete?.</p>

        <form name="modificar" method="get">
            <input type="submit" value="Borrar" id="btnBorrar" />
        </form>

    </div>

为了以防万一，这里有 CSS。

.popUp{
border-style: groove; border-width: 2px;
border-color: #2c3e50;
position: absolute;
width:256px;
height: 256px;
background-color: #ecf0f1;
top: 200px;
left: 600px;
border-radius: 5px;
z-index: 1000;
display: none;
 }

.show {
  display: block;
}

.hide {
  display: none;
}

.display{
display: inline;

}

#btnCerrar{
float: right;
}

#btnEliminar{
float: right;
}

最后但同样重要的是 JS。

    window.onload = function(){

     var elementPopUp = document.getElementById('lnkInfo');

      elementPopUp.addEventListener('click',validate);

      function validate() {
      document.getElementById('popUp').className +=' show';
    }

};




var elementBotonCerrar = document.getElementById('btnCerrar');

elementBotonIngresar.addEventListener('click',validar);

function validar(){

    if(elementBotonCerrar === 'click'){
     document.getElementById('popUp').className +=' hide';
 }

    };

非常感谢。最良好的祝愿

Answer 1

我做了以下并且它起作用了:

var elementInfo = document.getElementById('lnkInfo'),
elementBtnCerrar = document.getElementById('btnCerrar'); 

elementoVerInfo.addEventListener('click', function () {
displayPopUp('popUpCorrect');
});

elementoBotonCerrar.addEventListener('click', function () {
hidePopUp('popUpCorrect');
});

function displayPopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('hide','');
fElementDivToShow.className = newClass + ' show';
}

function hidePopUp(pIdDivToShow){
var fElementDivToShow = document.getElementById(pIdDivToShow),
newClass ='';
newClass = fElementDivToShow.className.replace('show','');
fElementDivToShow.className = newClass + ' hide';