Рассмотрим следующий код.
$(function() {
$("[data-close]").click(function(e) {
const dataClose = $(this).attr("data-close");
const elem = $('[data-id="' + dataClose + '"]').length ?
$('[data-id="' + dataClose + '"]') :
$(dataClose);
if (elem.hasClass("active") && elem.is(":visible")) {
elem.removeClass("active");
e.stopImmediatePropagation();
}
});
$("body").not(".active").click(function(e) {
console.log("body click");
$(".active").removeClass("active");
});
$(".button").click(function(e) {
var el = $(".modal[data-id='" + $(this).attr("id") + "']");
console.log($(this).attr("id") + " clicked, remove class 'active' from all. Add 'active' to ", el);
$(".active").removeClass("active");
el.addClass("active");
console.log(el);
e.stopPropagation();
});
});
.buttons {
display: flex;
align-items: center;
}
.button {
height: 30px;
cursor: pointer;
border: 2px solid;
padding: 1rem;
font-size: 28px;
}
#icon {
color: silver;
}
.header {
height: 15px;
background: #eee;
}
.modal {
position: fixed;
top: 72px;
right: 15px;
z-index: 6;
opacity: 0;
visibility: hidden;
transform: scale(0.5);
transform-origin: top right;
transition: 0.15s;
box-shadow: 0 1.5px 4px rgba(0, 0, 0, 0.24), 0 1.5px 6px rgba(0, 0, 0, 0.12);
}
.modal:after {
content: "";
width: 15px;
height: 15px;
background: inherit;
position: absolute;
background: #eee;
top: -6px;
right: 8px;
opacity: 0;
visibility: hidden;
transform: rotate(45deg) scale(0.5);
transition: 0.15s;
}
.modal.active {
opacity: 1;
visibility: visible;
transform: scale(1);
}
.modal.active:after {
opacity: 1;
visibility: visible;
transform: rotate(45deg) scale(1);
}
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="buttons">
<img src="https://www.dignitasteam.com/wp-content/uploads/2015/09/3050613-inline-i-2-googles-new-logo-copy.png" class="button" id="google" data-close="google" />
<img src="https://www.arabianbusiness.com/sites/default/files/styles/full_img/public/images/2017/01/17/apple-logo-rainbow.jpg" class="button" id="apple" data-close="apple" />
<div class="button" id="icon" data-close="icon">
<i class="fas fa-bell"></i>
</div>
</div>
<div class="modal" data-id="google">
<div class="header">Google</div>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<div class="modal apple-modal" data-id="apple">
<div class="header">Apple</div>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
<div class="modal" data-id="icon">
<div class="header">Icon</div>
<ul>
<li>First</li>
<li>Second</li>
<li>Third</li>
</ul>
</div>
Здесь вы можете видеть, что я настроил обратный вызов click
. Если вы не создаете динамический контент, я бы использовал .click()
против .on()
.
В этом случае лучше всего удалить класс active
из всех, а затем добавить его к определенному элементу. .toggleClass()
сделает это, но в зависимости от состояния вашего скрипта вы можете получить различные результаты или неожиданные результаты.
Использование правильного селектора также может очень помочь. Поскольку мы нацелены на конкретный .modal
, который имеет атрибут data-id
, мы можем использовать $(".modal[data-id='icon']")
в качестве селектора, чтобы получить этот конкретный элемент.
Надеюсь, что это помогает.
z-индексное свойство не будет относиться к статически расположенным элементам. Для использования z-индекса, CSS должен также включать любое значение положения кроме статического (т.е. относительный, абсолютный, зафиксированный).
.left { float: left; width: 96px; background-color: red; border: 2px solid orange; z-index: 3; margin-right: -2px; position: relative; }
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 2; position: relative; }
даст Вам, что Вы хотите, я думаю. Я добавил положение: родственник; и измененный z-индекс .left к 3 (от 2) и измененный z-индекс .right к 2 (от 3).
z-index
не имеет никакого эффекта на элементы, которые не расположены (например, position:absolute;
)
Отрицательный margin-left
?
.right { float: left; width: 396px; background-color: #09c; border: 2px solid green; z-index: 3; margin-left: -5px;}