0

純粋な Javascript を使用して、単純なライトボックスのような効果を作成しようとしています。もう一度クリックした場合に現在のクラスを削除する方法を見つけようとしています。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 に答える