Как сделать модальное окно, которое меняет размер?

D
На сайте с 01.09.2015
Offline
56
209

Здравствуйте. Имеется модальное окно со встроенным внутри слайдером картинок. На данный момент фиксированный размер окна 620x620, эти размеры необходимы для демонстрации 3 и 4 картинки, но нужно, чтобы 1 и 2 картинки демонстрировались при размере окна в 320х320. То есть надо, чтобы после второй картинки размер модального окна менялся с 320х320 на 620х620. Помогите, пожалуйста, решить эту задачу, если это вообще возможно сделать.


#wrap9{
display: none;
opacity: 0.8;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 16px;
background-color: rgba(1, 1, 1, 0.725);
z-index: 100;
overflow: auto;
}

#window9{
width: 620px;
height: 620px;
margin: 50px auto;
display: none;
background: #fff;
z-index: 200;
position: fixed;
left: 0;
right: 0;
top: 0;
bottom: 0;
padding: 16px;
}


#slider{
width: 100%;
height: 80vh;
margin: 0px auto;
position: relative;
overflow: hidden;
text-align:center;
}
.slide_item{
width: 100%;
height: 100%;
position: absolute;
left: 0;
top:0;
float: left;
opacity: 0;
z-index: -10;
background-size: cover;
}


<button onclick="show('block')">Продолжить</button>


<div id="wrap9"></div>

<!-- Само окно-->
<div id="window9">


<div id="slider">

<div class="slide_item">
<img src="https://cdn1.flamp.ru/1b0c06e888addc8e158ca552709de5a5_300_300.jpg">
</div>

<div class="slide_item">
<img src="https://cdn1.flamp.ru/4c6ba0df4ec769222aea54ba2159a68c_300_300.jpg">
</div>

<div class="slide_item">
<img src="https://app.clilk.com/db/projpics/5b6479432ab66ea7789f0172.png">
</div>

<div class="slide_item">
<img src="https://i03.fotocdn.net/s117/c9fe0056cfefb3ac/gallery_m/2676059525.jpg">
</div>

</div>
</div>


let timer = null;
let slider = document.querySelector('#slider'),
slides = slider.querySelectorAll('.slide_item'),
len = slides.length,
index = len - 1,
dir = 1;

function move() {
slides[index].style.opacity = "";
slides[index].style.Zindex = "";
index = (index + dir + len) % len;
slides[index].style.opacity = 1;
slides[index].style.Zindex = 1;
index < len - 1 && (timer = window.setTimeout(move, 2000));
}

function show(state) {
if (state === "block") {
timer = window.setTimeout(move, 0);
} else {
clearTimeout(timer);
}
document.getElementById('window9').style.display = state;
document.getElementById('wrap9').style.display = state;
}
Samail
На сайте с 10.05.2007
Offline
328
#1

let timer = null;

let slider = document.querySelector('#slider'),
slides = slider.querySelectorAll('.slide_item'),
len = slides.length,
index = len - 1,
dir = 1;

function move() {
slides[index].style.opacity = "";
slides[index].style.Zindex = "";
index = (index + dir + len) % len;
slides[index].style.opacity = 1;
slides[index].style.Zindex = 1;
var img = slides[index].getElementsByTagName('IMG')[0];
document.getElementById('window9').style.width = img.offsetWidth+'px';
document.getElementById('window9').style.height = img.offsetHeight+'px';
index < len - 1 && (timer = window.setTimeout(move, 2000));
}

function show(state) {
if (state === "block") {
timer = window.setTimeout(move, 0);
} else {
clearTimeout(timer);
}
document.getElementById('window9').style.display = state;
document.getElementById('wrap9').style.display = state;

}

Авторизуйтесь или зарегистрируйтесь, чтобы оставить комментарий