Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 03.01.2018, 04:05
Интересующийся
Отправить личное сообщение для aarka Посмотреть профиль Найти все сообщения от aarka
 
Регистрация: 18.10.2017
Сообщений: 20

Всплывающее окно (динамическое)
Здравствуйте, помогите пожалуйста с кодом, свой не вижу смысла выкладывать. ибо там все функцию в перемешку, что попала... Намучился за последние дни и в интернет к сожалению ничего нужного не нашел, везде кусочки, но мозгов не хватает правильно их переделать, чтобы собрать нужный код.

<div class="button-origin button">
<span>Оставить сообщение</span>
</div>
<div class="spoiler_body">
Чтобы отправить сообщение необходимо войти или зарегистрироваться
</div>


У класса "spoiler_body" в css прописан dyspaly:none.

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

Последний раз редактировалось aarka, 03.01.2018 в 04:08.
Ответить с цитированием
  #2 (permalink)  
Старый 03.01.2018, 09:48
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

aarka,
https://javascript.ru/forum/misc/694...tml#post456597

https://javascript.ru/forum/misc/553...tml#post367958
Ответить с цитированием
  #3 (permalink)  
Старый 03.01.2018, 10:50
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

модальное окно по центру, закрытие по клику вне блока
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>
Ответить с цитированием
  #4 (permalink)  
Старый 03.01.2018, 13:49
Интересующийся
Отправить личное сообщение для aarka Посмотреть профиль Найти все сообщения от aarka
 
Регистрация: 18.10.2017
Сообщений: 20

Благодарю всех за помощь. Решения хорошие, но я имел ввиду к примеру https://www.avito.ru/cheboksary/avto...2007_927364519. Там есть кнопка "отправить сообщение", хочется именно как она. Такой эффект, возможно это называется не всплывающем окном, но хотелось бы именно этого...
Ответить с цитированием
  #5 (permalink)  
Старый 03.01.2018, 16:23
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

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>
Ответить с цитированием
  #6 (permalink)  
Старый 03.01.2018, 17:32
Интересующийся
Отправить личное сообщение для aarka Посмотреть профиль Найти все сообщения от aarka
 
Регистрация: 18.10.2017
Сообщений: 20

Рони, спасибо огромное. То что нужно. Можно еще попросить у тебя помощи, чтобы всплывающая подсказка не расширяла экран? а то бывает, когда разрешение экрана меньше, то подсказка расширяет страницу и тем самым появляется скроллинг в браузере...
Ответить с цитированием
  #7 (permalink)  
Старый 03.01.2018, 17:47
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

Сообщение от aarka
подсказка не расширяла экран
.spoiler_body {
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%;
}
Ответить с цитированием
  #8 (permalink)  
Старый 03.01.2018, 18:04
Интересующийся
Отправить личное сообщение для aarka Посмотреть профиль Найти все сообщения от aarka
 
Регистрация: 18.10.2017
Сообщений: 20

Сообщение от рони Посмотреть сообщение
.spoiler_body {
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%;
}
С css понятно. У меня сделано так min-width:200px;width:auto;

Меньше 200px подсказку мне нельзя делать, но из-за расположения button-origin ближе к правому краю получается так, что при уменьшение окна браузера, подсказка уходит в право и расширяет экран. А хотелось бы, чтобы в независимо от экрана .spoiler_body центрировался по горизонтали относительно button-origin. Проблема у меня в этом заключается из-за того, что у меня сама кнопка button-origin резиновая, и когда размеры кнопки становятся меньше размера всплывающего контейнера (.spoiler_body) и происходит данная проблема...
Ответить с цитированием
  #9 (permalink)  
Старый 03.01.2018, 18:14
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,124

aarka,
по вопросам css к дизайнерам
Ответить с цитированием
  #10 (permalink)  
Старый 03.01.2018, 18:17
Интересующийся
Отправить личное сообщение для aarka Посмотреть профиль Найти все сообщения от aarka
 
Регистрация: 18.10.2017
Сообщений: 20

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



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать всплывающее окно по центру экрана? jslgogo Общие вопросы Javascript 8 26.08.2014 09:18
Всплывающее окно Rooner jQuery 1 23.04.2014 13:15
Ячейка как ссылка (всплывающее окно на jquery)? Алекс-ми Javascript под браузер 0 17.05.2013 18:58
Пропадает меню при переводе курсора на всплывающее окно Adept_90 Элементы интерфейса 14 10.07.2012 21:34
Всплывающее окно - надо задать границы Anton-CS Элементы интерфейса 0 18.07.2011 10:55