Всплывающее окно (динамическое)
Здравствуйте, помогите пожалуйста с кодом, свой не вижу смысла выкладывать. ибо там все функцию в перемешку, что попала... Намучился за последние дни и в интернет к сожалению ничего нужного не нашел, везде кусочки, но мозгов не хватает правильно их переделать, чтобы собрать нужный код.
<div class="button-origin button"> <span>Оставить сообщение</span> </div> <div class="spoiler_body"> Чтобы отправить сообщение необходимо войти или зарегистрироваться </div> У класса "spoiler_body" в css прописан dyspaly:none. Хочется простое всплывающее окно, без анимации. Но так как у меня дизайн адаптивный, то попросту привязываться к размерам не получится... Нужно резиновое всплывающее окно, с возможностью всплывать по центру по отношению к родительскому блоку... Заранее благодарен за любую помощь. Также, чтобы окошко закрывалось лишь в том случае, если пользователь кликнул вне родительского или вложенного div`a |
|
модальное окно по центру, закрытие по клику вне блока
aarka,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
* {
box-sizing: border-box;
}
.fixed-overlay {
position: fixed;
overflow: auto;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
}
.fixed-overlay__modal {
text-align: center;
white-space: nowrap;
}
.fixed-overlay__modal::after {
display: inline-block;
vertical-align: middle;
width: 0;
height: 100%;
content: '';
}
.modal {
display: inline-block;
vertical-align: middle;
}
.modal_container {
margin: 50px;
padding: 20px;
text-align: left;
white-space: normal;
background-color: #fff;
color: #000;
}
.spoiler_body {
transform: scale(0);
transition: .3s ease-in;
}
.spoiler_body.open{
transform: scale(1);
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".button-origin").on("click", function() {
$(".spoiler_body").addClass("open");
});
$(".spoiler_body").on("click", function(event) {
$(event.target).closest(".modal_container").length || $(".spoiler_body").removeClass("open");
});
});
</script>
</head>
<body>
<div class="button-origin button">
<span>Оставить сообщение</span>
</div>
<div class="fixed-overlay fixed-overlay__modal spoiler_body">
<div class="modal">
<div class="modal_container">Чтобы отправить сообщение необходимо войти или зарегистрироваться
</div>
</div>
</div>
</body>
</html>
|
Благодарю всех за помощь. Решения хорошие, но я имел ввиду к примеру https://www.avito.ru/cheboksary/avto...2007_927364519. Там есть кнопка "отправить сообщение", хочется именно как она. Такой эффект, возможно это называется не всплывающем окном, но хотелось бы именно этого...
|
aarka,
нужный вам css добавьте сами.
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<style type="text/css">
* {
box-sizing: border-box;
}
body, html{
height: 100%;
position: relative;
}
.spoiler_body {
position: absolute;
display: none;
border: 1px solid rgba(0, 0, 0, 1);
padding: 6px 4px;
background-color: rgba(255, 255, 255, 1);
}
.spoiler_body.open{
display: inline-block;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function() {
$(".button-origin").on("click", function() {
$(".spoiler_body").addClass("open");
});
$("body").on("click", function(event) {
$(event.target).closest(".spoiler_body, .button-origin").length || $(".spoiler_body").removeClass("open");
});
});
</script>
</head>
<body>
<div class="button-origin button">
<span>Оставить сообщение</span>
</div>
<div class="spoiler_body">Чтобы отправить сообщение необходимо войти или зарегистрироваться</div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quae hic rei publicae vulnera inponebat, eadem ille sanabat. Etsi qui potest intellegi aut cogitari esse aliquod animal, quod se oderit? Ut proverbia non nulla veriora sint quam vestra dogmata. Duo Reges: constructio interrete. Nos paucis ad haec additis finem faciamus aliquando; Utinam quidem dicerent alium alio beatiorem! Iam ruinas videres. Et ais, si una littera commota sit, fore tota ut labet disciplina. Quod quidem nobis non saepe contingit. Est enim tanti philosophi tamque nobilis audacter sua decreta defendere. </p>
</body>
</html>
|
Рони, спасибо огромное. То что нужно. Можно еще попросить у тебя помощи, чтобы всплывающая подсказка не расширяла экран? а то бывает, когда разрешение экрана меньше, то подсказка расширяет страницу и тем самым появляется скроллинг в браузере...
|
Цитата:
position: absolute; display: none; border: 1px solid rgba(0, 0, 0, 1); padding: 6px 4px; background-color: rgba(255, 255, 255, 1); max-width: 80%; } |
Цитата:
Меньше 200px подсказку мне нельзя делать, но из-за расположения button-origin ближе к правому краю получается так, что при уменьшение окна браузера, подсказка уходит в право и расширяет экран. А хотелось бы, чтобы в независимо от экрана .spoiler_body центрировался по горизонтали относительно button-origin. Проблема у меня в этом заключается из-за того, что у меня сама кнопка button-origin резиновая, и когда размеры кнопки становятся меньше размера всплывающего контейнера (.spoiler_body) и происходит данная проблема... |
aarka,
по вопросам css к дизайнерам |
Но мне кажется, что без js такое наверное не сделать((( Я что только не мудрил, ничего не помогает...
|
| Часовой пояс GMT +3, время: 17:13. |