0 Пользователей и 1 Гость просматривают эту тему.
  • 8 Ответов
  • 622 Просмотров
*

pulka

  • Захожу иногда
  • 63
  • 0 / 1
Модальные окна с jQuery
« : 04.07.2021, 15:53:41 »
 Здравствуйте. Прошу помощи в решении моей задачи. Мне необходимо сделать несколько модальных окон на одной странице. На официальном сайте я нашла хорошее решение. Однако, там код подразумевает наличие только одного окна. Как мне переделать его так, что бы я могла пользоваться им столько, сколько нужно (opener1, opener2..... dialog1, dialog2....)? Буду очень признательна.
*

draff

  • Гуру
  • 5803
  • 434 / 7
  • ищу работу
Re: Модальные окна с jQuery
« Ответ #1 : 04.07.2021, 19:37:35 »
Однако, там код подразумевает наличие только одного окна.
Откуда такой вывод ? Сколько нужно, столько и пишите селекторов и форм .
*

pulka

  • Захожу иногда
  • 63
  • 0 / 1
Re: Модальные окна с jQuery
« Ответ #2 : 05.07.2021, 21:11:06 »
 Вывод от неопытности. Подскажете как его переделать? Буду благодарна.
*

effrit

  • Легенда
  • 10132
  • 1118 / 13
  • effrit.com
Re: Модальные окна с jQuery
« Ответ #3 : 05.07.2021, 21:34:55 »
Код

  $( function() {
    $( "#dialog, #dialog2" ).dialog({   // тут добавляем через запятую перечисление диалоговых окон страницы, которые вызываются с одинаковыми эффектами. если эффекты разные, то надо дублировать весь блок целиком и менять в нем идентификатор (начинается с #) или класс (начинается с .)
      autoOpen: false,
      show: {
        effect: "blind",
        duration: 1000
      },
      hide: {
        effect: "explode",
        duration: 1000
      }
    });
 
    $( "#opener" ).on( "click", function() {
      $( "#dialog" ).dialog( "open" );
    });
    $( "#opener2" ).on( "click", function() {
      $( "#dialog2" ).dialog( "open" );
    });
  } );
  </script>
</head>
<body>
 
<div id="dialog" title="Basic dialog">
  <p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the &apos;x&apos; icon.</p>
</div>

<div id="dialog2" title="Second dialog">
  <p>second window &apos;x&apos; icon.</p>
</div>
 
<button id="opener">Open Dialog</button>
<button id="opener2">Open Dialog2</button>

*

ShopES

  • Захожу иногда
  • 426
  • 11 / 0
Re: Модальные окна с jQuery
« Ответ #4 : 05.07.2021, 21:50:44 »
а чего не использовать встроенные
behavior modal?
*

pulka

  • Захожу иногда
  • 63
  • 0 / 1
Re: Модальные окна с jQuery
« Ответ #5 : 07.07.2021, 23:01:39 »
Цитировать
Код
 $( function() {
    $( "#dialog, #dialog2" ).dialog({   // тут добавляем через запятую перечисление диалоговых окон страницы, которые вызываются с одинаковыми эффектами. если эффекты разные, то надо дублировать весь блок целиком

Спасибо за помощь. Именно этого перечисления мне и хотелось бы избежать т.к. модальных окон в сайте предполагается много. По 5, 6 на одной странице. Страниц более 10.....
*

pulka

  • Захожу иногда
  • 63
  • 0 / 1
Re: Модальные окна с jQuery
« Ответ #6 : 07.07.2021, 23:04:37 »
а чего не использовать встроенные
behavior modal?
Возможно, я не разобралась до конца со встроенными окнами. Мне необходимы окна для уточнения инфы, без затемнения сзади, и несколько на одной странице.
*

ShopES

  • Захожу иногда
  • 426
  • 11 / 0
Re: Модальные окна с jQuery
« Ответ #7 : 07.07.2021, 23:23:10 »
Возможно, я не разобралась до конца со встроенными окнами. Мне необходимы окна для уточнения инфы, без затемнения сзади, и несколько на одной странице.
так вам подсказки(tooltip)
нкжны?
*

pulka

  • Захожу иногда
  • 63
  • 0 / 1
Re: Модальные окна с jQuery
« Ответ #8 : 20.07.2021, 23:05:05 »
 В итоге у меня получилось что-то такое:

Код
$( function() {
$('.dialog').dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});

$( '.opener' ).on( "click", function() {
$( '#'+$(this).attr('data-id') ).dialog( "open" );
});
} );

Разметка HTML
Код
<div id="modal-window-1" class="dialog" title="Basic dialog">
<p>диалог 1</p>
</div>
<p><button class="opener" data-id="modal-window-1">диалог 1</button></p>

<div id="modal-window-2" class="dialog" title="Basic dialog">
<p>диалог 2</p>
</div>
<p><button class="opener" data-id="modal-window-2">диалог 2</button></p>
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

[Решено] Отключить Mootols, Jquery и Bootstrap в Joomla 3

Автор Pazys

Ответов: 126
Просмотров: 93809
Последний ответ 21.10.2022, 22:25:23
от Alex Kop
jQuery. Передать значение в поле формы Битрикс24

Автор fbr

Ответов: 40
Просмотров: 1563
Последний ответ 21.11.2021, 12:05:18
от gartes
Нет модального окна системных сообщений

Автор Lemonez

Ответов: 3
Просмотров: 477
Последний ответ 22.01.2021, 05:16:50
от Lemonez
Модуль или компонент Wrapper с авто размером высоты окна вставки

Автор Арчик

Ответов: 11
Просмотров: 940
Последний ответ 16.09.2020, 19:43:13
от rsn
Проблема с JQuery

Автор Lemonez

Ответов: 6
Просмотров: 572
Последний ответ 08.09.2020, 19:56:42
от gartes