Выделите элемент при изменении ориентации с помощью условий jQuery - PullRequest
Новая
       33

Выделите элемент при изменении ориентации с помощью условий jQuery

0 голосов
/ 21 сентября 2018

Я хочу, чтобы на моей странице прокрутилась точная строка (элемент) только , когда пользователь меняет ориентацию своего устройства с landscape на portrait (это первое условие) и только , если modal закрыто (не открыто, это второе условие).

Мне сложно написать это в коде с помощью jQuery, это то, что я пробовал до сих пор: 

window.addEventListener("orientationchange", function() {
  if (window.matchMedia("(orientation: portrait)").matches) && $(".modal").hide();  {
    $('html, body').scrollTop($('#exact-line').offset().top);
  }  
});
  1. Как правильно установить if для modal, чтобы определить, что его нет на странице?(Я не могу использовать display: none в этом случае);
  2. Как правильно настроить eventListner для изменения ориентации и заставить мою функцию работать?

1 Ответ

0 голосов
/ 21 сентября 2018 
$(".modal").hide()

- это код, который скрывает модал, а не проверяет, закрыт ли он.Вам нужно использовать $(".modal").is(':visible'); в вашем состоянии.

Если я вас правильно понимаю, вы хотите проверить не только то, что модальный режим не виден сейчас, но никогда не был виден с момента загрузки страницы.Для этого я бы определил булеву переменную и установил ее в false, как только будет открыт модальный режим.Я предполагаю, что вы используете модалы Bootstap, 'shown.bs.modal' - это событие, которое срабатывает при открытии модального окна: https://getbootstrap.com/docs/4.1/components/modal/#events

// variable to store the visibility
var modal_was_not_visible = true;

// listener for modal open
$('.modal').on('shown.bs.modal', function (e) {
  // set variable to false since modal is displayed
  modal_was_not_visible = false;
})

// use variable for your condition
window.addEventListener("orientationchange", function() {
  if (window.matchMedia("(orientation: portrait)").matches && modal_was_not_visible)  {
    $('html, body').scrollTop($('#exact-line').offset().top);
  }  
});
...