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
    29 окт 2013 в 15:48
  • И блоки лево, право, центр можно сделать не последовательными, а вложенными друг в друга обертками jsfiddle.net/JyJEQ/23
    – Heidel
    29 окт 2013 в 16:05
  • @Heidel, а вообще эта структура является правильной? Мне кажется, это делается немного иначе..
    – evansive
    29 окт 2013 в 16:07
  • @evansive а что вас смущает?
    – Heidel
    29 окт 2013 в 16:26
  • 1
    @evansive ну собственный мозг, к примеру, вы тоже никогда не видели, но тем не менее не сомневаетесь, что он есть. вот здесь, например, посмотрите как сделаны модальные окна, тоже много вложенных блоков deo-max.ru
    – Heidel
    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
    30 окт 2013 в 3:04

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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