Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #21 (permalink)  
Старый 03.01.2018, 20:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,125

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

<!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>

Последний раз редактировалось aarka, 03.01.2018 в 21:16.
Ответить с цитированием
  #23 (permalink)  
Старый 03.01.2018, 21:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,125

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

В 37 строке пусто... Я просто ваш скрипт хочу использовать для иконок, при клике на которые будет подсказка... И способ с css как-то не подходит, чтобы всегда всплывающее окно было по центру снизу относительно родительского дива (кнопки или иконки)...
Ответить с цитированием
  #25 (permalink)  
Старый 03.01.2018, 21:46
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,125

aarka,
http://beloweb.ru/javascript-jquery/...ry-i-css3.html
Ответить с цитированием
  #26 (permalink)  
Старый 10.01.2018, 02:36
Интересующийся
Отправить личное сообщение для aarka Посмотреть профиль Найти все сообщения от aarka
 
Регистрация: 18.10.2017
Сообщений: 20

рони,
С прошедшими праздниками) Еще раз благодарю за твою помощь) Хотел спросить, что в js коде нужно дописать, чтобы исчезла проблема, заключающаяся в следующем: Сделал две кнопки, и них одинаковые классы, когда нажимаю на первую кнопку, то появляется содержимое первой кнопки. Когда нажимаю на вторую кнопку, то открывается содержимое первой кнопки. Надеюсь понятно описал проблему, как это можно исправить?
Ответить с цитированием
  #27 (permalink)  
Старый 10.01.2018, 09:41
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,125

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

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

рони,
Спасибо большое, все прекрасно заработало)
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как сделать всплывающее окно по центру экрана? 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