Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице

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

рони 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?


Часовой пояс GMT +3, время: 13:52.
Страница 2 из 3 < 1 2 3 >
Показывать 40 сообщений этой темы на одной странице