3

Есть макет модального окна:

alt text

Как можно сделать с помощью HTML+CSS, чтобы оно было резиновым в ширину и высоту?

Мой вариант:

<div class="modal_window">
    <div id="header_left">
        <!-- Здесь кусок картинки от закругления слева -->
    </div>
    <div id="header_middle">
        <!-- Здесь небольшой в ширину кусочек из середины, который имеет свойство repeat-x
    <div id="header_right">
        <!-- Здесь кусок картинки от закругления справа -->
    </div>
    <!-- Тоже самое делаем с самим блоком, то есть центром блока, но уже повторяем как по x, так и по y -->
    <div id="middle_left">
    </div>
    <!-- И так далее, в общем -->
</div>

Так вот, вопрос вот в чем: подскажите, пожалуйста, как это делается правильно?

6
  • Задайте для .modal_window значения width и height в % и фиксированные значения min-width и min-height в пикселах.
    – Heidel
    Commented 29 окт. 2013 в 15:48
  • И блоки лево, право, центр можно сделать не последовательными, а вложенными друг в друга обертками jsfiddle.net/JyJEQ/23
    – Heidel
    Commented 29 окт. 2013 в 16:05
  • @Heidel, а вообще эта структура является правильной? Мне кажется, это делается немного иначе..
    – evansive
    Commented 29 окт. 2013 в 16:07
  • @evansive а что вас смущает?
    – Heidel
    Commented 29 окт. 2013 в 16:26
  • 1
    @evansive ну собственный мозг, к примеру, вы тоже никогда не видели, но тем не менее не сомневаетесь, что он есть. вот здесь, например, посмотрите как сделаны модальные окна, тоже много вложенных блоков deo-max.ru
    – Heidel
    Commented 29 окт. 2013 в 17:59

1 ответ 1

2

http://jsfiddle.net/6jrpu/5/

* {
    margin: 0px;
    padding: 0px;
}
body {
    width: 100%;
    height: 100%;
    font-family: Arial, Helvetica, sans-serif;
}
#modal {
    position: fixed;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    text-align: center;
    background-color: rgba(0, 0, 0, .4);
    z-index: 9999;
}
#modal:after {
    content:'';
    display: inline-block;
    vertical-align: middle;
    width: 1px;
    height: 100%;
    background: transparent;
}
#modal section {
    display: inline-block;
    vertical-align: middle;
    min-width: 30%;
    max-width: 60%;
    background: #fff;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    box-shadow: 0px 0px 0px 2px #fff, 2px 2px 5px 2px rgba(0, 0, 0, .6), 0px 0px 30px 0px rgba(0, 0, 0, .6);
}
#modal header {
    position: relative;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    padding: 5px;
    background: #8c5;
    box-shadow: 0px 0px 4px 0px rgba(0, 0, 0, .4) inset;
}
#modal article {
    padding: 10px 15px;
}
<div id="modal">
    <section>
        <header>
            Attention!!!
        </header>
        <article>
        Do you really wanna buy some ganja? Do you really wanna buy some ganja? Do you really wanna buy some ganja? Do you really wanna buy some ganja?
        </article>
    </section>
</div>

Попробуйте по ресайзить, по изменять текст.

1
  • @Олег Б, спасибо, а в случае с картинкой, валидно ли мое решение?
    – evansive
    Commented 30 окт. 2013 в 3:04

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.