There is a modal window layout:

alt text

How can I make it using HTML + CSS to make it rubber in width and height?

My version:

<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>

So, the question is this: tell me, please, how is this done correctly ?

  • Set the .modal_window width and height values ​​to% and fixed min-width and min-height values ​​in pixels. - Heidel
  • And the blocks left, right, the center can be made not consecutive, but nested in each other by wrappers jsfiddle.net/JyJEQ/23 - Heidel
  • @Heidel, is this structure correct in general? I think this is done a little differently .. - evansive
  • @evansive and what confuses you? - Heidel
  • one
    @evansive, well, your own brain, for example, you also never saw, but nevertheless you have no doubt that it is. here, for example, see how modal windows are made, too many nested blocks deo-max.ru - Heidel

1 answer 1

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>

Try to resize, to change the text.

  • @ Oleg B, thanks, but in the case of the picture, is my decision valid? - evansive