Новости Joomla

Joomla 4 выйдет в августе 2021

Дополнен официальный график релизов Joomla, в котором указан месяц выхода Joomla 4.

Статья об использовании HttpFactory в Joomla

В статье рассматривается альтернатива cURL, которая уже встроена в Joomla.

Как правильно подключать JavaScript и CSS в Joomla 4

В Joomla 4 появилась концепция Web Assets, которая упорядочила работу с JavaScript и CSS в Joomla. По сути каждый отдельный JS или CSS файл представляет собой ассет (ресурс).

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

pulka

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

draff

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

pulka

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

effrit

  • Легенда
  • 10025
  • 1102 / 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

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

pulka

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

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

pulka

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

ShopES

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

pulka

  • Захожу иногда
  • 62
  • 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>
Записан
1   Вверх
Чтобы оставить сообщение,
Вам необходимо Войти или Зарегистрироваться
 

Нет модального окна системных сообщений

Автор Lemonez

 Ответов: 3
Просмотров: 174 		Последний ответ 22.01.2021, 05:16:50
от Lemonez
[Решено] Отключить Mootols, Jquery и Bootstrap в Joomla 3

Автор Pazys

 Ответов: 124
Просмотров: 81296 		Последний ответ 05.11.2020, 20:08:46
от Grigoriy82
Модуль или компонент Wrapper с авто размером высоты окна вставки

Автор Арчик

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

Автор Lemonez

 Ответов: 6
Просмотров: 283 		Последний ответ 08.09.2020, 19:56:42
от gartes
Сформировать ajax запрос с помощью jQuery

Автор mirstiker

 Ответов: 11
Просмотров: 536 		Последний ответ 29.04.2020, 18:16:02
от beliyadm