Модальное окно для контактов

Пример можно увидеть справа внизу страницы.

Пишите и подписывайтесь

HTML:

Код можно разместить в любом месте документа.

<div class="contact-container">
	<div class="contact">
		<div>Пишите и подписывайтесь</div>
		<span class="close-btn"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg></span>
		<ul>
			<li>
				<a href="https://t.me/atuin_ru" rel="nofollow" target="_blank">
					<i class="fa fa-telegram"></i>
				</a>
			</li>
			<li>
				<a href="https://vk.com/atuin_ru" rel="nofollow" target="_blank">
					<i class="fa fa-vk"></i>
				</a>
			</li>
			<li>
				<a href="skype:xazbix">
					<i class="fa fa-skype"></i>
				</a>
			</li>			
			<li>
				<a href="mailto:info@atuin.ru">
					<i class="fa fa-envelope"></i>
				</a>
			</li>
			<li>
				<a href="tel:+79999999999">
					<i class="fa fa-phone"></i>
				</a>
			</li>
		</ul>
	</div>
</div>
<button class="contact-btn">Контакты</button>

<div>Пишите и подписывайтесь</div>

<ul>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

<li>

</a>

</li>

</ul>

</div>

<button class="contact-btn">Контакты</button>

CSS:

.contact-container * {
	box-sizing: content-box;
}	
.contact-container {
	position: fixed;
	right: 0;
	z-index: 99999999;
	bottom: 80px;
	transform: translateX(100%);
	transition: transform 0.4s ease-in-out;
}
.contact-container.visible {
	transform: translateX(-10px);
}
.contact {	
	background-color: #fff;
	border-radius: 16px;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	border: 5px solid #337AB7;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	font-family: Verdana, sans-serif;  
	position: relative;
	height: 110px;	
	width: 350px;
	max-width: calc(100% - 10px);
}
.contact span.close-btn {
	width: 20px;
	height: 20px;
	border: 0;
	cursor: pointer;
	position: absolute;
	top: 5px;
	right: 5px;
}
.contact span.close-btn svg {
	stroke: #337AB7;
	width: 20px;
	height: 20px;
}
.contact span.close-btn:focus {
	outline: none;
}
.contact div {
	background-color: #337AB7;
	border-radius: 0 0 10px 10px;
	color: #fff;
	font-size: 13px;
	font-weight: bold;
	text-transform: uppercase;
	line-height: 18px;
	padding: 2px 0 6px;
	position: absolute;
	top: 0;
	left: 50%;
	margin: 0;
	transform: translateX(-50%);
	text-align: center;
	width: 280px;
}
.contact ul {
	display: flex;
	list-style-type: none;
	padding: 0;
	margin: 0;
}
.contact ul li {
	margin: 24px 6px 0 6px;
}
.contact ul li a {
	border: 4px solid #BFE2FF;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	height: 48px;
	font-size: 24px;
	color: #337AB7;
	width: 48px;
	text-decoration: none;
	transition: all 0.2s ease-in-out;
}
.contact ul li a:hover {
	border-color: #337AB7;
	color: #000;
	box-shadow: 0 9px 12px -9px #337AB7;
}
.contact-btn {
	border-radius: 30px;
	background-color: #337AB7;
	border: 2px solid #337AB7;
	box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);
	color: #fff;
	cursor: pointer;
	padding: 12px 20px;
	position: fixed;
	bottom: 20px;
	right: 20px;
	z-index: 99999999;
	font-size: 15px;
	font-weight: bold;
	line-height: 20px;
	font-family: Verdana, sans-serif;  	
	text-transform: uppercase;
	transition: all 0.4s ease-in-out;
}
.contact-btn:hover {
	background-color: #ffffff;
	color: #337AB7;
}
.contact-btn:focus {
	outline: none;
}
@media screen and (max-width: 480px) {
	.contact-container.visible {
		transform: translateX(0px);
	}
	.contact-btn {
		right: 10px;
	}
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

.contact-container * {

box-sizing: content-box;

}

.contact-container {

position: fixed;

right: 0;

z-index: 99999999;

bottom: 80px;

transform: translateX(100%);

transition: transform 0.4s ease-in-out;

}

.contact-container.visible {

transform: translateX(-10px);

}

.contact {

background-color: #fff;

border-radius: 16px;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

border: 5px solid #337AB7;

display: flex;

flex-direction: column;

justify-content: center;

align-items: center;

font-family: Verdana, sans-serif;

position: relative;

height: 110px;

width: 350px;

max-width: calc(100% - 10px);

}

.contact span.close-btn {

width: 20px;

height: 20px;

border: 0;

cursor: pointer;

position: absolute;

top: 5px;

right: 5px;

}

.contact span.close-btn svg {

stroke: #337AB7;

width: 20px;

height: 20px;

}

.contact span.close-btn:focus {

outline: none;

}

.contact div {

background-color: #337AB7;

border-radius: 0 0 10px 10px;

color: #fff;

font-size: 13px;

font-weight: bold;

text-transform: uppercase;

line-height: 18px;

padding: 2px 0 6px;

position: absolute;

top: 0;

left: 50%;

margin: 0;

transform: translateX(-50%);

text-align: center;

width: 280px;

}

.contact ul {

display: flex;

list-style-type: none;

padding: 0;

margin: 0;

}

.contact ul li {

margin: 24px 6px 0 6px;

}

.contact ul li a {

border: 4px solid #BFE2FF;

border-radius: 50%;

display: flex;

justify-content: center;

align-items: center;

height: 48px;

font-size: 24px;

color: #337AB7;

width: 48px;

text-decoration: none;

transition: all 0.2s ease-in-out;

}

.contact ul li a:hover {

border-color: #337AB7;

color: #000;

box-shadow: 0 9px 12px -9px #337AB7;

}

.contact-btn {

border-radius: 30px;

background-color: #337AB7;

border: 2px solid #337AB7;

box-shadow: 0 4px 12px rgba(0,0,0,0.2), 0 16px 20px rgba(0,0,0,0.2);

color: #fff;

cursor: pointer;

padding: 12px 20px;

position: fixed;

bottom: 20px;

right: 20px;

z-index: 99999999;

font-size: 15px;

font-weight: bold;

line-height: 20px;

font-family: Verdana, sans-serif;

text-transform: uppercase;

transition: all 0.4s ease-in-out;

}

.contact-btn:hover {

background-color: #ffffff;

color: #337AB7;

}

.contact-btn:focus {

outline: none;

}

@media screen and (max-width: 480px) {

.contact-container.visible {

transform: translateX(0px);

}

.contact-btn {

right: 10px;

}

JS:

const contact_btn = document.querySelector('.contact-btn');
const close_btn = document.querySelector('.close-btn');
const contact_container = document.querySelector('.contact-container');
contact_btn.addEventListener('click', () => {
	contact_container.classList.toggle('visible')
});
close_btn.addEventListener('click', () => {
	contact_container.classList.remove('visible')
});

const contact_btn = document.querySelector('.contact-btn');

const close_btn = document.querySelector('.close-btn');

const contact_container = document.querySelector('.contact-container');

contact_btn.addEventListener('click', () => {

contact_container.classList.toggle('visible')

});

close_btn.addEventListener('click', () => {

contact_container.classList.remove('visible')

});

Серега: 23.03.2023 в 04:33

Добрый день, а подскажите как кнопку сделать слева, а не справа?

Ответить
- Alexander: 24.03.2023 в 06:25
  
  Ниже есть в комментариях
  
  Ответить
Иван: 13.08.2022 в 12:22

Как подписать с низу каждую иконку. Тоесть телеграм допустим заказать звонок и.т.д

Ответить
- Alexander: 14.08.2022 в 17:46
  
  Не знаю, текст там не уместится.
  Если иконки с текстами, они должны вертикально открываться.
  
  Ответить
  - Иван: 15.08.2022 в 12:14
    
    А как вместо иконок вставить другие картинки подскажите пожалуйста.
    
    Ответить
    - Alexander: 15.08.2022 в 13:07
      
      Вместо <i class="fa fa-telegram"></i> вставить SVG или IMG и добавить соотв. стили для их оформления.
      
      Ответить
Дмитрий: 19.01.2022 в 15:00

А как сделать чтоб слева выезжала? сменил right на left, но окно теперь просто висит на странице и не выезжает.

Ответить
- Alexander: 19.01.2022 в 15:46
  
  transform: translateX(100%); и transform: translateX(-10px);
  плюс на минус
  
  Ответить
  - Дмитрий: 19.01.2022 в 19:24
    
    Спасибо за оперативный ответ, все получилось)
    
    Ответить
жека: 17.03.2021 в 22:03

приветствую, в чем может быть причина - иконки телеграма, вк и скайпа не отображаются, тогда как мыло и труба - всё отображается?

Ответить
- жека: 17.03.2021 в 22:13
  
  при этом меняю иконку на любую другую, и все норм ...
  
  Ответить
- Alexander: 18.03.2021 в 06:28
  
  А версия шрифта какая?
  Телеграм например в версии 4.7 добавили, а ВК и скайп в 3.2
  А если используется 5 awesome, то нужно смотреть подключение, на сколько я помню, там бренды отдельно подключаются и выводятся.
  
  Ответить
  - Жека: 18.03.2021 в 10:01
    
    4.7 юзал, потом пробовал более раннюю версию,эффект тот же ... копаюсь пока. Вопрос по хоу, а можно ли как-то "тупо" заменить иконки на картинки?
    
    Ответить
    - Alexander: 18.03.2021 в 10:30
      
      Вопрос по хоу, а можно ли как-то "тупо" заменить иконки на картинки?
      
      Я бы даже сказал нужно, тем более если шрифт не подключен.
      Менйте на картинку или SVG и проставьте размеры.
      Я просто себе делал такую под шрифт, ее и выложил, а добавить графику как то руки не дошли...
      
      Ответить
      - Максим: 24.02.2023 в 01:16
        
        Доброе времени суток. Подскажите пожалуйста, как сделать так чтоб форма закрывался при нажатии на любое пустое пространства?
        
        Ответить

Пример можно увидеть справа внизу страницы.

HTML:

CSS:

JS:

Смотрите также:

Добавить комментарий:

Комментарии: