Javascript-форум (https://javascript.ru/forum/)
-   jQuery (https://javascript.ru/forum/jquery/)
-   -   Всплывающее окно (динамическое) (https://javascript.ru/forum/jquery/72039-vsplyvayushhee-okno-dinamicheskoe.html)

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

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


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

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

рони 03.01.2018 09:48
aarka,
https://javascript.ru/forum/misc/694...tml#post456597

https://javascript.ru/forum/misc/553...tml#post367958

рони 03.01.2018 10:50
модальное окно по центру, закрытие по клику вне блока
 
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>

aarka 03.01.2018 13:49
Благодарю всех за помощь. Решения хорошие, но я имел ввиду к примеру https://www.avito.ru/cheboksary/avto...2007_927364519. Там есть кнопка "отправить сообщение", хочется именно как она. Такой эффект, возможно это называется не всплывающем окном, но хотелось бы именно этого...

рони 03.01.2018 16:23
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>

aarka 03.01.2018 17:32
Рони, спасибо огромное. То что нужно. Можно еще попросить у тебя помощи, чтобы всплывающая подсказка не расширяла экран? а то бывает, когда разрешение экрана меньше, то подсказка расширяет страницу и тем самым появляется скроллинг в браузере...

рони 03.01.2018 17:47
Цитата:
Сообщение от 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%;
}

aarka 03.01.2018 18:04
Цитата:
Сообщение от рони (Сообщение 474207)
.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) и происходит данная проблема...

рони 03.01.2018 18:14
aarka,
по вопросам css к дизайнерам

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

рони 03.01.2018 19:05
aarka,
сделайте минимальный макет, чтоб ваша проблема проявилась, чтоб не гадать, как у вас устроено, может кто-то откликнется.

aarka 03.01.2018 19:24 
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
* {
    box-sizing: border-box;
}

.button-origin {background-color:#fff;font-size:14px;color:#000;padding:6px 13px;border:1px solid #ccc;border-radius:3px;display:inline-block;text-align:center;max-width:150px;padding:15px 0;font-size:16px;font-weight:400;position: relative;
}

.spoiler_body {display:none;cursor:default;position:absolute;border: solid 1px #ececec;padding:10px; z-index:101;background-color: #fff;font-color:#333333;box-sizing:border-box;box-shadow:0px 0px 4px 1px #eee;-webkit-box-shadow:0px 0px 4px 1px #eee;-moz-box-shadow:0px 0px 4px 1px #eee;min-width:200px; width:auto; margin:auto; left:0;right:0;margin-top:5px;font-size:14px;}
.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>

aarka 03.01.2018 19:35
рони,
Сделал, но даже по скриптингу вы единственный, кто отозвались и помогли)

рони 03.01.2018 19:39
aarka,
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
* {
    box-sizing: border-box;
}

.button-origin {background-color:#fff;font-size:14px;color:#000;padding:6px 13px;border:1px solid #ccc;border-radius:3px;display:block;text-align:center;max-width:100%;padding:15px 0;font-size:20px;font-weight:400;margin-left:70%;position: relative;
}

.spoiler_body {display:none;cursor:default;position:absolute;border: solid 1px #ececec;padding:10px; z-index:101;width:300px;background-color: #fff;font-color:#333333;box-sizing:border-box;box-shadow:0px 0px 4px 1px #eee;-webkit-box-shadow:0px 0px 4px 1px #eee;-moz-box-shadow:0px 0px 4px 1px #eee;min-width:200px;width:auto;margin:auto;left:0;right:0;margin-top:45px;font-size:14px;}
.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 class="spoiler_body">Чтобы отправить сообщение необходимо войти или зарегистрироваться</div></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>

aarka 03.01.2018 19:55
Это понятно, я это сделал. А вот если размер кнопки по горизонтали уменьшился до 100px, а всплывающее окно к примеру 200px, то получается что оно не центрируется, а выводится не ровно, залезая за правый край... И эту проблему css походу не решить(

рони 03.01.2018 20:03
aarka,
а зачем вам ширину сообщения указывать, если эта ширина зависит от ширины кнопки в данном html
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
* {
    box-sizing: border-box;
}

.button-origin {background-color:#fff;font-size:14px;color:#000;padding:6px 13px;border:1px solid #ccc;border-radius:3px;display:block;text-align:center;max-width:100%;padding:15px 0;font-size:20px;font-weight:400;margin-left:70%;position: relative;
}

.spoiler_body {display:none;cursor:default;position:absolute;border: solid 1px #ececec;padding:10px; z-index:101;background-color: #fff;color:#333333;box-sizing:border-box;box-shadow:0px 0px 4px 1px #eee;-webkit-box-shadow:0px 0px 4px 1px #eee;-moz-box-shadow:0px 0px 4px 1px #eee;width:auto;margin:auto;left:0;right:0;margin-top:45px;font-size:14px;}
.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");
  });
  $("html").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 class="spoiler_body">Чтобы отправить сообщение необходимо войти или зарегистрироваться</div></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>

рони 03.01.2018 20:06
aarka,
если нужно сохранить текст в пределах сообщения
добавить
.spoiler_body.open{
display: inline-block; word-wrap: break-word;
}

рони 03.01.2018 20:09
aarka,
вариант с break-word
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
* {
    box-sizing: border-box;
}

.button-origin {background-color:#fff;font-size:14px;color:#000;padding:6px 13px;border:1px solid #ccc;border-radius:3px;display:block;text-align:center;max-width:100%;padding:15px 0;font-size:20px;font-weight:400;margin-left:70%;position: relative;
}

.spoiler_body {display:none;cursor:default;position:absolute;border: solid 1px #ececec;padding:10px; z-index:101;background-color: #fff;color:#333333;box-sizing:border-box;box-shadow:0px 0px 4px 1px #eee;-webkit-box-shadow:0px 0px 4px 1px #eee;-moz-box-shadow:0px 0px 4px 1px #eee;width:auto;margin:auto;left:0;right:0;margin-top:45px;font-size:14px;}
.spoiler_body.open{
  display: inline-block;  word-wrap: break-word;
}
</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");
  });
  $("html").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 class="spoiler_body">Чтобы отправить сообщение необходимо войти или зарегистрироваться</div></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>

aarka 03.01.2018 20:28
Я просто изначально когда начал мудрить всплывающее окно, почему-то начал следовать такой структуре html. Да же не знаю, наверное потому что большинство схожих примеров... https://javascript.ru/forum/attachme...d=151500031 3 вот скрин проблемы, которую я описываю)) То есть, если кнопка стала меньше, то всплывающее окно не центрируется по горизонтали относительно кнопки(

рони 03.01.2018 20:55
aarka,
что мешает сделать как в посте №18?

рони 03.01.2018 20:58
aarka,
сложно тег из строки 37, перенести в конец строки 38?

aarka 03.01.2018 21:13 
<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
* {
    box-sizing: border-box;
}

.button-origin {background-color:#fff;font-size:14px;color:#000;padding:6px 13px;border:1px solid #ccc;border-radius:3px;display:block;text-align:center;max-width:100%;padding:15px 0;font-size:20px;font-weight:400;margin-left:70%;position: relative;
}

.spoiler_body {display:none;cursor:default;position:absolute;border: solid 1px #ececec;padding:10px; z-index:101;background-color: #fff;color:#333333;box-sizing:border-box;box-shadow:0px 0px 4px 1px #eee;-webkit-box-shadow:0px 0px 4px 1px #eee;-moz-box-shadow:0px 0px 4px 1px #eee;width:auto;margin:auto;left:0;right:0;margin-top:45px;font-size:14px;}
.spoiler_body.open{
  display: inline-block;  word-wrap: break-word;
}
</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");
  });
  $("html").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 class="spoiler_body">Чтобы отправить сообщение необходимо войти или зарегистрироваться
<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></div></div>


</body>
</html>

рони 03.01.2018 21:18
aarka,
мне сложно догадываться, и лучше к специалистам css

aarka 03.01.2018 21:20
В 37 строке пусто... Я просто ваш скрипт хочу использовать для иконок, при клике на которые будет подсказка... И способ с css как-то не подходит, чтобы всегда всплывающее окно было по центру снизу относительно родительского дива (кнопки или иконки)...

рони 03.01.2018 21:46
aarka,
http://beloweb.ru/javascript-jquery/...ry-i-css3.html

aarka 10.01.2018 02:36
рони,
С прошедшими праздниками) Еще раз благодарю за твою помощь) Хотел спросить, что в js коде нужно дописать, чтобы исчезла проблема, заключающаяся в следующем: Сделал две кнопки, и них одинаковые классы, когда нажимаю на первую кнопку, то появляется содержимое первой кнопки. Когда нажимаю на вторую кнопку, то открывается содержимое первой кнопки. Надеюсь понятно описал проблему, как это можно исправить?

рони 10.01.2018 09:41
Цитата:
Сообщение от aarka
как это можно исправить?
строка 25, добавить красное
$(".spoiler_body", this).addClass("open");
или заменить на это 
$(".spoiler_body").not($(".spoiler_body", this).addClass("open")).removeClass("open");

aarka 10.01.2018 17:14
рони,
Спасибо большое, все прекрасно заработало)


Часовой пояс GMT +3, время: 07:56.