Question

在我不断寻找知识的情况下，我再次到达了一堵墙，我正在攀登卢布。基本上我有这个div作为一个popUp，我需要它来做一些有效的事情！但后来我决定在角落里设置X的关闭按钮来模仿浏览器的工作方式。

当我这样做时，我遇到了以下麻烦：

1.Div打开但不关闭。 2. div中的按钮不起作用，这意味着它不会打开另一个popUp并确认。

我还删除了第二点的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

您的代码存在一些问题。

您调用变量来获取“btnCerrer”元素，但在下一行中，您将事件附加到其他元素elementBotonIngresar。

接下来，在validar函数中，询问DOM元素是否等于'click'。

该功能应该是这样的

function validar(e) {
    if(elementBotonCerrar === e.currentTarget) {
        //...
    } 
}

第三，您需要替换类名，而不是添加上一个类。

第四，与类不同，元素的id应该是唯一的。

Answer 2

我做了以下工作并且有效：

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

如何制作<a> tag close a diiv.</a>

2 个答案: