Javascript.RU

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

Очередное увеличение высоты блока
Добрый день!
Есть такая задача
<div id="myModal">
<input type="checkbox">
<div id="price" style="display:none"></div>
</div>

Модальное окно сверстанно на бутстрап2, надо что бы при клике по инпуту показывался/скрывался блок price (это реализовано), но тогда контент модального окна выпадает за границы модали. Я попытался реализовать установку высоты модального окна следующим образом:
var Num = document.body.clientWidth;
        	var width = +Num;
        	var display1 = document.getElementById("price").style.display;
        	if (display1 == "none" && width >= 979) {
        		document.getElementById("myModal").style.height = 870 + "px";
        	} else if (display1 == "block" && width >= 979) {        		
        		document.getElementById("myModal").style.height = 970 + "px" + "!important";
        	} else if (display1 == "none" && width < 979) {
        		document.getElementById("myModal").style.height = 1210 + "px";
        	} else if (display1 == "block" && width < 979) {
        		document.getElementById("myModal").style.height = 1330 + "px" + "!important";
        	};


Код устанавливает исходную высоту модали при загрузке, но при переходе от none в block он не увеличивается, что надо добавить, что б код начал функционировать, я так понимаю, что он проанализировал ситуацию на момент загрузки страницы и все. может изменение высоты надо реализовать через функцию клика по checkbox? Подскажите куда топать, не хочется весь день убить перебирая варианты....
Ответить с цитированием
  #2 (permalink)  
Старый 10.11.2015, 10:46
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Сообщение от Павел Турченко
Подскажите куда топать
Таки сделать нормальную верстку того окна, дабы окно само растянулось под размер контента...
Ответить с цитированием
  #3 (permalink)  
Старый 10.11.2015, 10:56
Аспирант
Отправить личное сообщение для Павел Турченко Посмотреть профиль Найти все сообщения от Павел Турченко
 
Регистрация: 18.04.2015
Сообщений: 47

Из-за того что это модаль из бутстрап2, то изначально высота у него была 600px и прокрутка, прокрутку надо было удалить и модальное окно растянуть на всю высоту, с этим был геморрой, поэтому возможность регулировки высоты окна я нашел только через фиксированную высоту при разных разрешениях и опциях...
Ответить с цитированием
  #4 (permalink)  
Старый 10.11.2015, 11:06
Аспирант
Отправить личное сообщение для Павел Турченко Посмотреть профиль Найти все сообщения от Павел Турченко
 
Регистрация: 18.04.2015
Сообщений: 47

var Num = document.body.clientWidth;
var width = +Num;
var display1 = document.getElementById("price").style.display;
       if (display1 == "none" && width >= 979) {
        	document.getElementById("myModal").style.height = 870 + "px";
        } else if (display1 == "none" && width < 979) {
        	document.getElementById("myModal").style.height = 1210 + "px";
       	};
 	document.getElementById("site").onclick = function height_modal(){
        	if (display1 == "none" && width >= 979) {
        		document.getElementById("price").style.display = "block";
                document.getElementById("myModal").style.height = 1010 + "px";
            } else if (display1 == "block" && width >= 979) {  
            	document.getElementById("price").style.display = "none";             
                document.getElementById("myModal").style.height = 870 + "px";
            } else if (display1 == "none" && width < 979) {
            	document.getElementById("price").style.display = "block";
                document.getElementById("myModal").style.height = 1330 + "px";
            } else if (display1 == "block" && width < 979) {
            	document.getElementById("price").style.display = "none"; 
                document.getElementById("myModal").style.height = 1210 + "px";
            }
        	};

в общем решил вот такой аброкадаброй...
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Изменить высоту фрейма в зависимости от высоты блока в загружаемом документе Sigizmund2012 Элементы интерфейса 18 09.12.2014 18:07
Реакция на изменения высоты блока hopest Angular.js 4 28.05.2014 17:46
Измерить высоту блока исходя из высоты браузера skillful Элементы интерфейса 1 19.01.2014 21:20
Автоматическая смена высоты блока maximale Элементы интерфейса 2 29.01.2012 13:20
Высота блока в зависимости от высоты браузера andreykor Общие вопросы Javascript 4 23.05.2011 09:56