ZorNet.Ru — сайт для вебмастера » Скрипты для uCoz » Модальное окно KroPus при помощи CSS

Модальное окно KroPus при помощи CSS

Сегодня разберем, как при помощи CSS создать красивое модальное окно, где не будет JavaScript или Jquery и всяких архивов и библиотек, все очень просто делается и по установке, здесь можно сказать, что самое простое. Но дизайн у него как можно видеть темный и обводом синем, но изначально был красный, что пришлось переделать. Если брать само оригинальное модальное окно с чего и было переделано, то явно можно подумать, что это совершенно разные продукты материала.

Тут нужно сказать, что дизайн и стилистика, зависит от вам, по умолчанию код идти будет с обратной связью, уже рабочей для системы uCoz. Но также проверил его и по плееру, что для просмотра, все отлично, только ширину нужно подогнать, ту которая нужна. Здесь видим что красная кнопка, сделал просто так, чтоб понятно было, что все регулируется, но идет основа в темной гамме.

Начнем его устанавливать.

Каркас кода:

Установка происходит, там где вам нужно видеть надпись, чтоб вызвать, некоторые делают кнопку.

Код

<a href="#openModal2" class="info">Клик сюда</a>
<div id="openModal2" class="modalDialog">
  <div>
  <a href="#close" title="Close" class="close1">X</a>

<div class="v_loop">
<div class="v_top"><b>Связь с Администратором</b></li></div>
<div class="v_cont"><span style="font-size: 8pt;">$MFORM_1$</span></div>
</div>

  </div>
</div>

Отступы, чтоб видно было, также можно написать или как на главном изображение выставил связь с администрацией.

Теперь прописываем стили в CSS.

Код

/*Оформление*/
.modalDialog {
  position: fixed;
  /* font-family: Arial, Helvetica, sans-serif; */
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0,0,0,0.8);
  z-index: 99999;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  display: none;
}
/*Открытие*/
.modalDialog:target {
  display: block;
  pointer-events: auto;
}

.modalDialog > div {
  width: 500px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px 20px;
  border-radius: 10px;
  background: #fff;
  background: #333333;
  border: 2px solid #33B4FF;
}
/*Закрытие окна*/
.close1 {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}

.close:hover { background: #ff9933; }
#send_info{color:#ffffff;font-size: 16px;}

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

01 Мая 2016 Просмотров: 2542 Комментариев: (8)

Поделиться в социальных сетях

Материал разместил

Kosten

Похожие материалы

Оставь свой отзыв

Комментарии: 8
Порядок вывода комментариев: Сопрано 01 Мая 2016 01:15¹ 0 С того модального окна с которого был переделано это окно, точно не скажу, но ставил, и там видео у меня сразу установилось как нужно. Kosten 01 Мая 2016 01:20² 0 Наверно, больше всего, сразу было выставлена ширина больше, и потому плеер установился нормально. Так как только ширина автоматом идет основном, но на других нужно настраивать. А этот тип окна, все больше в интернете встречается и отзывы у него не плохие и сама установка, легче чем информер установить. Сопрано 01 Мая 2016 01:26³ 0 Больше всего выставлена была, так как ставил после одного скрипта, что шире делал. Но что оно простое модальное окно, тут согласен, вообще редко найдешь на одном CSS, чтоб скриптов с ним валом не шло, а то вверх сайта поставь на некоторых и потом в корень сайта закинь, а эффект точно такой же, но если только появление самого окна другое. tsakonter 01 Мая 2016 01:28⁴ 0 Костен, окно та на видео с брендом подобрал.) Kosten 01 Мая 2016 01:32⁵ 0 Но что поделать, если зашел на ютуб, и почти везде он, но решил, а почему бы и нет.) Сафрон 01 Мая 2016 01:40⁶ 0 С видео один только минус, когда оно идет и окно отключаешь, то все же оно идет и на отключенном. Kosten 01 Мая 2016 04:21⁷ 0 Но это много можно заметить на модальных окнах, что есть такой косяк с произведением видео. feliksteg 02 Мая 2016 15:09⁸ 0 Эта переделка больше понравилась, хотя от оригинала можно посмотреть, что стили совершенно по другому переписан.