Demo hide content withour cover

by Alexander Zonov

HTML

<div class="js-is-enabled-in-browser">
  <div class="block block-that-need-some-scripts-for-work">
    <a class="show-popup" href="http://google.com">Ссылка первая</a><br/>
    <a class="show-popup" href="http://baidu.com">Ссылка вторая</a><br/>
    <a class="show-popup" href="http://ya.ru">Ссылка третья</a>
  </div>
  <div class="block block-works-fine-without-scripts">
    Some content that requires no javascript
  </div>
</div>

CSS

.block {
  height: 100px;
}

.block-that-need-some-scripts-for-work {
  background-color: rgb(200, 200, 200);
}

.block-works-fine-without-scripts {
  background-color: rgb(180, 180, 180);
}

.js-is-enabled-in-browser.show-content .block-that-need-some-scripts-for-work {
  visibility: visible;
}

.js-is-enabled-in-browser .block-that-need-some-scripts-for-work {
  visibility: hidden;
}

JavaScript

function initPopup() {
	var links = document.querySelectorAll('.show-popup');
  
  Array.prototype.forEach.call(links, function(el, i) {
  	el.addEventListener('click', function(e) {
    	e.preventDefault();
      alert(el.textContent); // show popup instead of default link action
    });
  });
  
  showContent();
}

function showContent() {
	var wrapper = document.querySelector('.js-is-enabled-in-browser'); // here can be html tag
  wrapper.classList.add('show-content');
}

setTimeout(initPopup, 3000);