Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 21.01.2020, 10:00
Аспирант
Отправить личное сообщение для Lefseq Посмотреть профиль Найти все сообщения от Lefseq
 
Регистрация: 19.04.2019
Сообщений: 88

Как сделать модальное окно, которое меняет размер?
Здравствуйте. Имеется модальное окно со встроенным внутри слайдером картинок. На данный момент фиксированный размер окна 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;
}
Ответить с цитированием
  #2 (permalink)  
Старый 21.01.2020, 11:30
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,772

Сообщение от Lefseq
Имеется модальное окно
Почему все время много кто говорит/пишет про окно. Да еще и модальное!

Хотя этот элемент вообще не является окном.
И такое сплошь и рядом. Кто вас такому научил?
Ответить с цитированием
  #3 (permalink)  
Старый 22.01.2020, 12:44
Профессор
Отправить личное сообщение для Nexus Посмотреть профиль Найти все сообщения от Nexus
 
Регистрация: 04.12.2012
Сообщений: 3,053

Попробуйте так:
var popup = document.getElementById('window9');

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;
    
    if (index > 1) {
        popup.style.width = '620px';
        popup.style.height = '620px';
    } else {
        popup.style.width = '320px';
        popup.style.height = '320px';
    }
    
    index < len - 1 && (timer = window.setTimeout(move, 2000));
}


ЗЫ. в css изначальный размер попапа должен быть 320*320px.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Bootstrap модальное окно igor.3dviz Общие вопросы Javascript 1 09.02.2014 11:27
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 11:29
Как открыть модальное окно в fancybox по ссылке? mbp64 jQuery 1 03.10.2012 13:22
Как сделать как в JQ? faforty Общие вопросы Javascript 8 13.11.2011 23:35
ExtJS3: как сделать локальное модальное окно? aristov ExtJS 1 13.10.2011 13:09