Сначала информацию, варианты отображения которой будем исследовать, поместим в div-блок с заданным классом:
1 2 |
<div class="my_w" align="center">[latex]\mu[/latex] - греческая буква в кодировке Латех. Видно? </div> |
Чтобы не менялась предыдущая информация, будем менять именования класса my_w посредством добавления цифры: my_w1, my_w2 и т.п.
Пропишем в окне Single Page Code стили окна. Вводим размер окна, его цвет и обрамляющую прямоугольную рамку ширины 8 px со своим цветом:
1 2 3 4 5 6 7 8 9 |
<style type="text/css" media="screen"> .my_w1 { width:250px; height:50px; color#033151; background:#ecf6ff; border:8px solid #bbe0ff; } </style> |
Меняем стиль. Добавляем свойства для создания теней и закругления углов:
1 2 3 4 5 |
background-clip: padding-box; background-color: #FFF; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.3); |
Добавляем новые параметры для изменения положения окна. Приписываем ему появиться вверху окна браузера и по горизонтали центрироваться:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
<style type="text/css" media="screen"> .my_w3 { width:250px; height:50px; background-clip: padding-box; background-color: #FFF; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.3); left: 50%; top: 10%; margin-left: -125px; position: fixed; } </style> |
Окно передвинулось вверх благодаря top: 10%;, и отцентрировалось по горизонтали благодаря свойствам left: 50%; и margin-left: -125px; Важно: 125=250/2, где width:250px;. Однако при скролировании всего окна данного поста поверх окна залезает содержание окон с кодом и верхняя панель окна темы сайта WordPress. Добавляем в стиль свойство z-index: 1050;
Теперь окно оказалось поверх всех материалов на странице, центрировано по центру горизонтали окна браузера и отображается вверху окна браузера, однако не привязано к полям данного поста.
Получился эффект расширения окна как в рассмотренном примере с кнопкой.
Понятно, что вместо того, чтобы каждый раз прописывать стили окна с новым свойством надо иметь возможность по клику менять нужное свойство!
Изменим способ задания окна. Поместим div-блок с содержанием в новый div-контейнер:
1 2 3 4 5 6 |
<div id="okno"> <div class="telo-okna"> <p>[latex]\mu[/latex] - греческая буква в кодировке Латех. Видно?</p> <a href="#" onclick="vsplivauchii_block('none'); return false">Закрыть</a> </div> </div> |
Теперь есть возможность задания стиля как блока содержания (тела окна), так и блока контейнера (окна):
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<style type="text/css" media="screen"> #okno { width: 560px; background-clip: padding-box; background-color: #FFF; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.3); left: 50%; top: 10%; margin-left: -280px; position: fixed; outline: medium none; z-index: 1050; } .telo-okna { position: relative; overflow-y: auto; padding: 15px; max-height: 400px; } </style> |