Всплывающие окна div при изменении размера браузера

Question

Всплывающие окна div при изменении размера браузера

0

У меня есть всплывающее окно, которое будет уменьшаться, и содержимое будет вытеснено в размере окна браузера. Я застрял с этим

Вот скрипка: http://jsfiddle.net/sarathsprakash/ZjdU4/

и вот полноэкранная скрипка: http://jsfiddle.net/sarathsprakash/ZjdU4/show/

Возможно, вы можете просмотреть и проверить изменение размера окна

HTML

<div id="popup" >

 <div id="img-section" >
        <img src="http://icons.iconarchive.com/icons/artdesigner/tweet-my-web/256/single-bird-icon.png" />
        </div>
    <div id="description">
     //text content
    </div>

</div>
<div id="fade" class="black_overlay"></div>
<a href="#"> click here</a>

CSS

.black_overlay {
     display: none;
     position: absolute;
     top: 0%;
     left: 0%;
     min-width: 100%;
     min-height: 100%;
     background-color: black;
     z-index:1001;
     -moz-opacity: 0.8;
     opacity:.80;
     filter: alpha(opacity=80);
 }
 #popup {
     display: none;
     position: fixed;
     top: 8%;
     left: 10%;
     max-width:1200px;
     max-height:600px;
     height:auto;
     width:auto;
     padding: 16px;
     background-color: white;
     z-index:1002;
     overflow:hidden;

  }
 #img-section {
     position:relative;
     width:800px;
     float:left;
     background:black;
     cursor:pointer;
     height:600px;
     padding:5px;
     margin-top: -20px;
     margin-left: -15px;
     margin-right: 10px;

 }
 #description {
     position:relative;
     background-color: #fff;
     max-width:400px;
     overflow-y: auto;
     position: relative;
     word-wrap: break-word;
     max-height:600px;
     height:auto;
     padding: 20px;

 }
 #img-section > img {
     display:inline-block;
     height: auto;
     vertical-align:middle;
     width:auto;
 }

Я хочу, чтобы poup остался, как есть, он не должен сокращаться

заранее спасибо

SarathSprakash 14 дек. 2013, в 20:15

Источник

0

В чем проблема?
Rudie 14 дек. 2013, в 18:26
0

Именно так должны работать браузеры. Может быть, вы можете уточнить, чего вы хотите достичь.
Stephen Thomas 14 дек. 2013, в 18:26
0

Вы можете изменить размер браузера, он сжимается
SarathSprakash 14 дек. 2013, в 18:27
0

Это плохо, что он сжимается? Похоже, разумная вещь ...
Rudie 14 дек. 2013, в 18:28
0

@Rudie, вы могли видеть, что текстовый контент уменьшается при уменьшении
SarathSprakash 14 дек. 2013, в 18:30
0

@SarathSprakash Да, я вижу. Что вы предлагаете нам сделать по этому поводу? Сжать левую сторону тоже? Ничего не сжимать (поэтому полосы прокрутки невидимы)? Сделать весь документ с горизонтальной прокруткой? Вы дали ему MAX-ширину в конце концов ...
Rudie 14 дек. 2013, в 18:35
0

@Rudie Я думаю, что работа с горизонтальной прокруткой документа без сжатия работает для меня
SarathSprakash 14 дек. 2013, в 18:37

Показать ещё 5 комментариев

Теги:

javascript

jquery

html

css

2 ответа

0

Вы используете процент для своего роста и ширины.

Браузер изменил свой размер на Resize, поэтому значение процента обесценивается. Как 10% от 100px отличается от 10% 10px.

Используйте px чтобы сохранить высоту и ширину одинакового размера при изменении размера. Конечно, в зависимости от того, чего вы хотите, ни лучше, чем другого

Khan Luke 15 май 2016, в 15:01

0

Ты смешной. Мы здесь для кода, а не литературы
Khan Luke 16 май 2016, в 15:06

Ещё вопросы

Именно так должны работать браузеры. Может быть, вы можете уточнить, чего вы хотите достичь.
Вы можете изменить размер браузера, он сжимается
Это плохо, что он сжимается? Похоже, разумная вещь ...
@Rudie, вы могли видеть, что текстовый контент уменьшается при уменьшении
@SarathSprakash Да, я вижу. Что вы предлагаете нам сделать по этому поводу? Сжать левую сторону тоже? Ничего не сжимать (поэтому полосы прокрутки невидимы)? Сделать весь документ с горизонтальной прокруткой? Вы дали ему MAX-ширину в конце концов ...
@Rudie Я думаю, что работа с горизонтальной прокруткой документа без сжатия работает для меня
Ты смешной. Мы здесь для кода, а не литературы

Rudie · Accepted Answer · 2013-12-14T16-37-00.000Z

Боковая прокрутка для всплывающего окна ужасна, но:

сделать всплывающее position: absolute а не fixed
дайте телу min-width левого поля + ширину всплывающего окна (в настоящее время это будет calc(1200px + 10%)
такой же для высоты?
сделать все max-width => width, потому что вы знаете, сколько места у вас есть

Ваш существующий CSS очень странный, но это может сделать это: http://jsfiddle.net/rudiedirkx/ZjdU4/1/

Особенности:

body {
    min-width: calc(1200px + 10%);
}
.black_overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
#popup, #popup * {
    box-sizing: border-box;
}
#popup {
    position: absolute;
    width: 1200px;
    height: 600px;
    padding: 0;
}