Div исчезает по щелчку

Question

Итак, я столкнулся с новой проблемой ...

Я хочу "Перекрытие ДИВ появляться, когда сайт загружен, и при нажатии, он уходит и показывает" пауза 'div. И когда нажата клавиша «пауза», мне нужен «оверлейный» div, чтобы вернуться. Текущий сценарий выглядит следующим образом:

Сценарий:

$(function() { 
    $(document).on("click",function (e) { 
    if (e.target.id=="pause") { 
     $("#overlay").fadeToggle(500); 
     e.stopPropagation(); 
     return true; 
    } 
    else if ($("#overlay").is(":visible")) { 
     $("#pause").fadeOut(500); 
    } 

    else if ($("#pause").is(":visible")) { 
     $("#overlay").fadeOut(500); 
    } 
    }); 
}); 

HTML:

<div id="overlay"> 
     <div class="play"> 
      <img src="play.png" style="height: 100%; width: 100%;" onclick="playMusic();"> 
     </div> 
    </div> 
    <div id="pause"> 
     <img src="pause.png" style="height: 100%;"> 
    </div> 

JSFiddle: https://jsfiddle.net/owr0sv8m/

Помощь было бы замечательно, так как я еще новичок в скриптах ...

Заранее спасибо! /Chris

Answer 1

я думаю, что вы пытаетесь сделать что-то вроде этого

var overlay = document.querySelector("#overlay"); 
 

 
function toggleClass() { 
 
    this.classList.toggle("active") 
 
} 
 

 
overlay.addEventListener("click", toggleClass, false);

#overlay .pause{ 
 
    display: none 
 
} 
 
#overlay.active .play{ 
 
    display: none 
 
} 
 
#overlay.active .pause { 
 
    display: block 
 
}

<div id="overlay" class=active> 
 
    <div class="play"> 
 
    <img src="play.png" style="height: 100%; width: 100%;" onclick="playMusic();"> 
 
    <caption>Play</caption> 
 
    </div> 
 
    <div class="pause"> 
 
    <img src="pause.png" style="height: 100%;"> 
 
    <caption>Pause</caption> 
 
    </div> 
 
</div>

Но если не попробовать этот

var overlay = document.querySelector("#overlay"), 
 
    pause = document.querySelector("#pause"); 
 

 
function toggleClassOnPause() { 
 
    pause.classList.contains("active") ? pause.classList.remove("active") : overlay.classList.add("active"); 
 
    overlay.classList.add("active") 
 
} 
 

 
function toggleClassOnOverlay() { 
 
    overlay.classList.contains("active") ? overlay.classList.remove("active") : overlay.classList.add("active"); 
 
    pause.classList.add("active") 
 
} 
 

 
pause.addEventListener("click", toggleClassOnPause, false); 
 
overlay.addEventListener("click", toggleClassOnOverlay, false);

#pause, 
 
#overlay { 
 
    display: none 
 
} 
 
#pause.active, 
 
#overlay.active { 
 
    display: block 
 
}

<div id="overlay" class=active> 
 
    <div class="play"> 
 
    <img src="play.png" style="height: 100%; width: 100%;" onclick="playMusic();"> 
 
    <caption>Overlay</caption> 
 
    </div> 
 
</div> 
 
<div id="pause"> 
 
    <img src="pause.png" style="height: 100%;"> 
 
    <caption>Pause</caption> 
 
</div>

Answer 2

проверить эту скрипку и принять ее в соответствии с вашими потребностями. Довольно короткие и сладкие.

HTML:

<div id="overlay" style="width: 100%; height: 100%; background-color: #f0f0f0"> 
<div style="display: table;vertical-align:middle; width: 100px; height: 100px; background-color: red"> 
    <a style="display:table-cell;vertical-align: middle">lorem ipsum</a> 
</div> 
<div style="display: table;vertical-align:middle; width: 100px; height: 100px; background-color: red"> 
    <a style="display:table-cell;vertical-align: middle">lorem ipsum</a> 
</div> 
</div> 

<div id="pause" style="width: 100%; height: 100%; background-color: #f0f0f0"> 
<div style="display: table;vertical-align:middle; width: 100px; height: 100px; background-color: gray"> 
    <a style="display:table-cell;vertical-align: middle">lorem ipsum</a> 
</div> 
<div style="display: table;vertical-align:middle; width: 100px; height: 100px; background-color: gray"> 
    <a style="display:table-cell;vertical-align: middle">lorem ipsum</a> 
</div> 
</div> 

CSS:

.visibleb { 
    display:block !important; 
} 
#overlay,#pause { 
    display:none; 
} 

JavaScript:

 $(document).ready(function() { 
     $('#overlay').addClass('visibleb'); 

     $(document).on("click",function (e) { 
     $('#pause').toggleClass('visibleb'); 
     $('#overlay').toggleClass('visibleb'); 
       e.preventDefault(); 

    }); 

}); 

https://jsfiddle.net/kodedsoft/bm4hhfsd/2/