0

我正在尝试使用纯 Javascript 创建一个类似 Lightbox 的简单效果。如果再次单击，我试图弄清楚如何删除当前类。我尝试了 Stack Overflow 上建议的多种解决方案，但没有取得多大成功。我不想使用 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;
}
4

1 回答 1

0

嗨，请按照如下所示进行更改

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

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

希望这能解决你的问题

于 2013-11-13T10:55:23.053 回答