Проблемы с CSS - PullRequest
Новая
       12

Проблемы с CSS

0 голосов
/ 01 сентября 2018

Я пытался заставить модал выскакивать над остальной частью моего контента какое-то время и, похоже, не может этого добиться. Все остальные модалы на моей странице работают, кроме одного. Когда я нажимаю на изображение, которое я пытаюсь открыть, появляется модальное окно, чтобы заполнить раздел скользящего списка, но не остальную часть страницы. Карусель, которую я использую, называется Slick Slider.

Смотрите фотографии, что я имею в виду: https://imgur.com/a/qQls7j7

Как вы можете видеть, все в разделе скользкого списка темнеет, но модальное не появляется. Кроме того, нажатие в любом месте на странице, включая темный раздел, не закрывает модал, как это происходит с другими модалами. Кроме того, несмотря на то, что все настройки CSS одинаковы для всех модов на странице, тот, который вызывает у меня проблемы, выглядит намного темнее других ... Я не уверен, является ли это ключом или нет.

Вещи, которые я пробовал: изменение z-индекса изменение положения изменение дисплея

Я серьезно вне идей, ребята! Мой маленький модал кажется застрявшим в коробке навсегда: (

МОПС 

 .slick-carousel
  div
    .item
      img(src="images/test2.jpg").item-trigger
      .item-modal
        .item-modal-content
        span.item-close-button ×
        h1 Item!

Мой CSS 

.item-modal {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  visibility: hidden;
  transform: scale(1.1);
  transition: visibility 0s linear 0.25s, opacity 0.25s 0s, transform 0.25s;
  z-index: 999999;
}
.item-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background-color: white;
  padding: 1rem 1.5rem;
  width: 24rem;
  border-radius: 0.5rem;
}
.item-close-button {
  float: right;
  width: 1.5rem;
  line-height: 1.5rem;
  text-align: center;
  cursor: pointer;
  border-radius: 0.25rem;
  background-color: lightgray;
}
.item-close-button:hover {
  background-color: darkgray;
}
.item-show-modal {
  opacity: 1;
  visibility: visible;
  transform: scale(1.0);
  transition: visibility 0s linear 0s, opacity 0.25s 0s, transform 0.25s;
}

Slick CSS 

.slick-list
{
    position: relative;
    display: block;
    /* made overflow visible to show box shadows around whole poster */
    overflow: hidden;

    margin: 0;
    padding: 0;
}
.slick-list:focus
{
    outline: none;
}
.slick-list.dragging
{
    cursor: pointer;
    cursor: hand;
}

.slick-slider .slick-track,
.slick-slider .slick-list
{
    -webkit-transform: translate3d(0, 0, 0);
    -moz-transform: translate3d(0, 0, 0);
        -ms-transform: translate3d(0, 0, 0);
        -o-transform: translate3d(0, 0, 0);
            transform: translate3d(0, 0, 0);
}
...