Помогите разобраться с popup jquery

235

24 сентября 2017, 00:44

У меня есть popup-окно, в закрытом состоянии отображается envelope, нажимая на него, появляется popup-окно, envelope должен исчезать, а вместо него должен появляться close. Но у меня envelope и close меняются поочередно...не так, как должно быть...подскажите пожалуйста

script.js:

// отображается envelope для для запуска popup window
$('.show_popup').click(function() {
    var popup_id = $('#' + $(this).attr("rel"));
    $(popup_id).show();
    $('.overlay_popup').show();
})
$('.overlay_popup').click(function() {
    $('.overlay_popup, .popup').hide();
})
//c закомментированным кодом ниже работает неправильно
// $('.envelope').click(function () {
//     $('.envelope').hide();
//     $('.close').show();
// })
// $('.close').click(function () {
//     $('.close').hide();
//     $('.envelope').show();
// })

index.php:

<div class="content">
<!-- icon element on the screen-->
<div class="show_popup blue-circle" rel="popup1">
    <i class="fa  fa-envelope-o envelope" aria-hidden="true"></i>
    <i class="fa fa-times close" aria-hidden="true"></i>
</div>
</div>
<div class="overlay_popup"></div>
<!-- popup element -->
<div class="popup" id="popup1">    
    <div id="text"></div>    
</div>

style.css:

.popup,
.overlay_popup {
display: none;
}
.close {
display: none;
}
.overlay_popup {
position: fixed;
left: 0px;
top: 0px;
right: 0px;
bottom: 0px;
z-index: 2;
background: rgba(0, 0, 0, 0);
}
.popup {
position: fixed;
z-index: 3;
left: 87%;
top: 93%;
transform: translate(-50%, -50%);
max-width: 200px;
padding: 20px;
background: #fff;
z-index: 1;
}
.blue-circle {
position: fixed;
left: 85%;
top: 90%;
width: 40px;
height: 40px;
background-color: #03a9f5;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 50px;
text-align: center;
z-index: 2;
}
.blue-circle i {
color: #ecfeff;
font-size: 25px;
margin-top: 7px;
}

Answer 1

Попробуйте так:

const $envelope = $('.envelope'),
  $popup = $('.popup'),
  $popupOverlay = $('.overlay_popup'),
  $popupClose = $('.close');
$envelope.on('click', showPopup);
$popupClose.on('click', hidePopup);
function showPopup() {
  $envelope.hide();
  $popupClose.show();
  $popupOverlay.show();
  $popup.filter(`#${$(this).closest('.show_popup').attr('rel')}`).show();
}
function hidePopup() {
  $envelope.show();
  $popupClose.hide();
  $popupOverlay.hide();
  $popup.hide();
}