» »

Модальное окно с обводом JQuery и CSS


Модальное окно с обводом JQuery и CSS

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

Если говорить об оформление, то оно явно переделано, это как заметили красивая кнопка, что изначально была большая надпись, что сразу убрал. И когда вы будете меньше или шире делать его, вам придется и отключать также ровнять. Это хорошо в стилях все есть, можно поднять и в любую сторону установить. Сам материал вообще нужен, чтоб вы могли что то постороннее на нем подключить или вывести, это может как регистрация или новости, вообщем все что сделаете в HTML коде, и поставите в сам каркас и потом уже смотрим как по диаметру делать, что по обводу, просто добавил, чтоб немного придать какого то колорита.

Установка:

CSS:



Селектор «.close» будет отвечать за саму кнопку закрытия, это понятно, но если вы ее даже не установите, то можете закрывать по клику, а точнее по темному фону сделать и оно исчезнет.

Подключение JQuery



Вверх сайта ставим в head, можно в самый потолок.

Код
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js"></script>


Подключаем JavaScript



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



Что по фактуре, уже было сказано и по умолчанию стоит width: 570px; и ширина height: 350px; чтоб не искали и понятно было.

HTML



Это последнее и это вам уже нужно установить, там где хотите видеть и могли открывать при клике на надпись.

Код
<a href="#dialog" name="modal">Открыть окно</a>  
<div id="boxes">  
  <div id="dialog" class="window">
<a href="#" class="close"><img border="0" align="absmiddle" src="http://zornet.ru/Ajaxoskrip/Fekstura_tekst/4lX9kS6.png"></a>
<h2>Военная разведка</h2>  

Даже смерть не является оправданием невыполнения боевого приказа
   
  </div>  
  <div id="overlay"></div>  
</div>


Но на этом все, так по стилистики приятно смотрится, и тематика любая подойдет, теперь только остается подумать, что поставить внутрь материала.
04.05.2016 Просмотров: 406 Комментарий: (6)

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

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

Комментарий: 6
Сопрано
Сопрано 04.05.2016 18:061
0
Просто кому то нравится, что все он настраивает, и если ему нужно кнопку отвести и сделать как то не стандартно или вообще ее убрать, так как оказывается и без кнопки закрывается, то он это сделает, нормальное окно и бордер прописан удачно.
tsakonter
tsakonter 04.05.2016 18:302
0
Но и автоматически хорошо, и самому если выставлять, также не плохо, а если так и без кнопки можно убрать, то и зачем оно нужна, хотя с другой стороны, она дизайн делает.
Сафрон
Сафрон 04.05.2016 18:453
0
Костен, где ты их находишь, это модальные окна, еще рабочие. Интернет весь подняй наверно, просто можно найти на одном сайте сразу с десяток. biggrin
Tergran
Tergran 04.05.2016 19:244
0
Нужно было сразу обвод на других делать, или просто написать, что можно сделать и как, там стиль то цвет и ширина - border: 1px solid #BEC1C3; вот и весь обвод не считая, что еще прописан border-radius: 5px; просто находим основной стиль и дописываем.
feliksteg
feliksteg 04.05.2016 23:535
0
Это модальное окно больше остальных нравится, может потому что под дизайн хорошо подходит.
Kosten
Kosten 12.05.2016 19:256
0
Но его можно сделать и по другому, обвод прозрачный, кнопку поставить другую, здесь больше ориентировался был на синий оттенок и потому так получилось.
avatar