Как сделать jQuery UI Autocomplete таким образом, чтобы, когда пользователь начинает печатать, другой контент стал модальным? - PullRequest
Новая
       18

Как сделать jQuery UI Autocomplete таким образом, чтобы, когда пользователь начинает печатать, другой контент стал модальным?

0 голосов
/ 02 мая 2020

Мне бы хотелось, чтобы, когда пользователи начинают использовать jquery автозаполнение пользовательского интерфейса (элемент получает фокус, или пользователь начинает печатать), этот другой контент (за исключением элементов, отображаемых при автозаполнении) выглядит как модальное окно. .

Когда элемент теряет фокус, другие элементы вне автозаполнения должны выглядеть нормально.

Аналогичное поведение используется TripAdvisor (в данный момент), на веб-сайте TripAdvisor вы можете увидеть, что, когда пользователи начинают вводить текст в поле поиска, другой контент выглядит как за модальным окном.

Как этого добиться с помощью jqueryUI?

1 Ответ

0 голосов
/ 02 мая 2020

Мне удалось выполнить эту функцию со следующим:

CSS

#modal-background {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #aaa; /* white */
  filter: alpha(opacity=20);
  opacity: .20;
  -webkit-opacity: .2;
  -moz-opacity: .2;
  z-index: 10; /* 1000 */
}


#modal-background.active {
  display: block;
}

HTML

положить 

<div id="modal-background"></div>

после тега <body>

Автозаполнение JS код : 

jQuery('#your_autocomplete').autocomplete({
...
     open: function(event, ui) {
       $("#modal-background").addClass("active");
     },
     close: function(event, ui) {
       $("#modal-background").removeClass("active");
     },
...

JSFiddle:

http://jsfiddle.net/adamovic/f4we9dbo/

...