Модальное окно

[BehemothOz]

Добрый день.

Возник такой вот вопрос. 

На многих сайтах замечаю так называемые "модальные окна". Стало любопытно, как они верстаются (без скриптов).

Так как я всего месяца три изучаю HTML и CSS, теории в голове не так много.

Но поразмыслив немного + порывшись в интернете нашел пару способов. 

Немного адаптировал их под себя. Но все равно итогового результата не могу добиться. 

Не понимаю, что не так. Надеюсь на вашу помощь.

 

Если объяснить проблему на словах, то, при нажатии на кнопку, должно (по идее) появляться модальное окно. Так оно и было, пока я не добавил фон-затемнение. После этой "процедуры" при нажатии на кнопку появляется только фон.

Ссылку прилагаю:

http://codepen.io/anon/pen/oXdaBY?editors=110

 

 

 

Пока интересен сам функционал, так что обхожусь без декор-элементов.

Edited July 11, 2015 by BehemothOz

[amelice]

 

Если объяснить проблему на словах, то, при нажатии на кнопку, должно (по идее) появляться модальное окно. Так оно и было, пока я не добавил фон-затемнение. После этой "процедуры" при нажатии на кнопку появляется только фон.

Ссылку прилагаю:

http://codepen.io/anon/pen/oXdaBY?editors=110

 

 

 

Пока интересен сам функционал, так что обхожусь без декор-элементов.

У вас все хорошо, просто вы еще самому модальному окну (.win ) поставили display: none;

Если его убрать, то все есть.

http://codepen.io/anon/pen/yNjwVO

[BehemothOz]

 

 

Если объяснить проблему на словах, то, при нажатии на кнопку, должно (по идее) появляться модальное окно. Так оно и было, пока я не добавил фон-затемнение. После этой "процедуры" при нажатии на кнопку появляется только фон.

Ссылку прилагаю:

http://codepen.io/anon/pen/oXdaBY?editors=110

 

 

 

Пока интересен сам функционал, так что обхожусь без декор-элементов.

У вас все хорошо, просто вы еще самому модальному окну (.win ) поставили display: none;

Если его убрать, то все есть.

http://codepen.io/anon/pen/yNjwVO

 

Огромное огромное спасибо! Буду двигаться дальше)