Question

我正在尝试使用纯Javascript创建一个简单的Lightbox效果。我想弄清楚如果再次点击，如何删除当前类。我在Stackoverflow上尝试了多种解决方案但没有取得多大成功。我不想使用jQuery或任何其他插件。我认为问题可能出在我的if / else语句中，但似乎无法确定问题的确切位置。谢谢你的建议。 http://jsfiddle.net/nFNG3/

document.addEventListener('DOMContentLoaded', init, false);

function init(){

    function getPop() {
    if (item.className.value == null ){
    item.className += "" + newClass;
    return createFrame();
    }
    else {
    removeClass();
    }


    }

    function createFrame() {
    var el = document.createElement('iframe');
    el.setAttribute('id', 'ifrm');
    el.setAttribute('scrolling','no');
    document.body.appendChild(el);
    el.setAttribute('src', 'http://info.kinnser.com/WWW-DEMO-WEBFORM.html');
    }

    function removeClass() {
    item.className.value == null;

    }



var item = document.getElementById('popit');
var newClass = "light-background";
item.addEventListener('click', getPop, false);

}

HTML

<body>

<div id="container">
    <div id="button-container">

        <a href="#" id="popit">Demo Now</a>
        <span id="working"></span>
    </div>




</div>



</body>

CSS

.light-background{
position:fixed;
width:100%;
height:100%;
background-color:grey;

}

#ifrm{
position:fixed;
width:275px;
height:549px;
z-indez:4;
background-color:white;
top:20%;
left:50%;
margin-top:-50px;
margin-left: -100px;
overflow:hidden;


}

Answer 1

您可以进行如下所示的更改

function getPop() {
  if (!item.className){
       item.className += "" + newClass;
       return createFrame();
  }
   else {
    removeClass();
   }
}

function removeClass() {
    item.className = '';
}

希望这能解决您的问题

如果第二次单击纯Javascript，删除类

1 个答案: