0

При нажатие на картинку , она должна сплывать в большем размере. Все ok, но вот как ее подвинешь в центр, часть правого края серый.

Может я слеп, но совсем не вижу проблемы. Не замена цвета, ничего не помогает, просто обрезается и все.

Jquery v3.3.1

Код, а именно скрипт и его стили не мои. Сам совсем новичок в этом. Всё что относится к проблеме ( код ) прикрепил. + скрин

UPD: Методом "тыка" решил, почему то в свойстве .popup_bg , а именно width 100% - не являлось 100 проц. Как только ты вводишь 150% затемняет весь фон и все нормально.При этом, если нет данного свойства, картинку расширенную закрыть нельзя.(скорее всего из-за скрипта)

Буду рад, если расскажите почему именно так :)

Пример проблемы

$(document).ready(function() {
  $(".image").click(function() {
    var img = $(this);
    var src = img.attr('src');
    $("body").append("<div class='popup'>" +
      "<div class='popup_bg'></div>" +
      "<img src='" + src + "' class='popup_img' />" +
      "</div>");
    $(".popup").fadeIn(800);
    $(".popup_bg").click(function() {
      $(".popup").fadeOut(800);
      setTimeout(function() {
        $(".popup").remove();
      }, 800);
    });
  });
});
.image {
  /* margin:30px;  */
  /* float:left; */
  cursor: pointer;
  max-height: 300px;
}

.popup_img {
  position: fixed;
  margin: 0 auto;
  z-index: 2;
  max-height: 94%;
  max-width: 94%;
  margin-top: 25px;
  pointer-events: none;
}

.popup {
  position: fixed;
  height: 100%;
  width: 100%;
  top: 0;
  right: 300px;
  display: none;
  text-align: center;
}

.popup_bg {
  background: rgba(0, 0, 0, 0.699);
  position: fixed;
  z-index: 1;
  height: 100%;
  width: 100%;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="b3">
  <div class="in3">
    <div class="content3">
      <h2>Your thoughts</h2>
      <div class="audio1">
        <div class="cover1">
          <img src="http://via.placeholder.com/250x250/ff00ff/000000" class="image" width="280px" height="280px" style="margin-bottom: 5px">
          <p class="nameCover1">Citizen — Yellow Love</p>
        </div>
        <audio src="6666.mp3" controls>Citizen — Yellow Love</audio>
      </div>
    </div>
  </div>
</section>

7
  • @Air Спасибо за правку 15 ноя 2018 в 17:09
  • @Air ??? Почему? Мне нужен ответ, но я не знаю решения. Куда мне еще его задовать ? 15 ноя 2018 в 17:13
  • @air т.е. ты сделал ? 15 ноя 2018 в 17:14
  • @air не знаешь в чем мб проблема? 15 ноя 2018 в 17:41
  • Anton, я так понимаю, что элемент class='popup' должен раскрываться на весь экран?
    – Air
    15 ноя 2018 в 17:49

1 ответ 1

1

Надеюсь я правильно понял

$(document).ready(function() {
  $(".image").click(function() {
    var img = $(this);
    var src = img.attr('src');
    $("body").append("<div class='popup'>" +
      "<div class='popup_bg'></div>" +
      "<img src='" + src + "' class='popup_img' />" +
      "</div>");
    $(".popup").fadeIn(800);
    $(".popup_bg").click(function() {
      $(".popup").fadeOut(800);
      setTimeout(function() {
        $(".popup").remove();
      }, 800);
    });
  });
});
* {
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  height: 100%;
}

.image {
  cursor: pointer;
  max-height: 300px;
}

.popup {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  display: none;
  text-align: center;
}

.popup_bg {
  background: rgba(0, 0, 0, 0.699);
  position: absolute;
  z-index: 1;
  height: 100%;
  width: 100%;
}

.popup_img {
  position: absolute;
  left: 50%;
  top: 50%;
  margin: 0 auto;
  z-index: 2;
  pointer-events: none;
  transform: translate(-50%, -50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class="b3">
  <div class="in3">
    <div class="content3">
      <h2>Your thoughts</h2>
      <div class="audio1">
        <div class="cover1">
          <img src="http://via.placeholder.com/250x250/ff00ff/000000" class="image" width="280px" height="280px" style="margin-bottom: 5px">
          <p class="nameCover1">Citizen — Yellow Love</p>
        </div>
        <audio src="6666.mp3" controls>Citizen — Yellow Love</audio>
      </div>
    </div>
  </div>
</section>

2
  • Да, отлично! Спасибо за помощь! Все работает, как нужно :) 15 ноя 2018 в 19:38
  • Всегда пожалуйста
    – Air
    15 ноя 2018 в 19:38

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.