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

159

22 апреля 2019, 22:10

При нажатие на картинку , она должна сплывать в большем размере. Все 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>

Answer 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>