Динамически увеличивающееся окно в зависимости от содержимого

Рейтинг: 0Ответов: 1Опубликовано: 29.01.2015

Добрый день!

Подскажите, пожалуйста, я сделал всплывающее окошко по технологии двух div-ов (1 большой и затемненный, другой - маленький и светлый). При открытии всплывающего окошка div заполняется HTML-код таблицы, а таблицы бывают маленькие и большие - поэтому нужно, чтобы низ всплыв. окошка двигался вверх/вниз, в зависимости от размеров таблицы.

Может свойство какое CSS надо прописать? Или еще какой метод есть?

javascript html
Источник: Stack Overflow на русском

Ответы

▲ 1

Доброго времени суток.

Такое страшное дело можно сварганить в jQuery.

Итак, погнали:

CSS:

/* Темный фон */
.background{
  background: rgba(0,0,0,.5);
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

/* Окошко */
.window{
  background: #fff;
  position: relative;
  margin: 100px auto 100px auto;
  width: 300px;
  color: #000000;
}

HTML:

<div class='background'>
  <div class='window'>
    <table id='table'>
      <tr>
        <td>Большая и маленькая таблица.</td>
      </tr>
    <table>
</div>
</div>

jQuery:

$(document).ready(function(){
  $('.window').css({height:$('#table').height()+"px"}); 
});

Вот таким образом это дело можно организовать.