Jak uniknąć przewijania stron podczas korzystania z qtip?

Question

Jestem wielkim fanem qTip, ale zastanawiałem się, czy istnieje sposób użycia okna modalnego bez przewijania strony do góry.

Rozejrzałem się, ale jeszcze nic nie znalazłem. czy to możliwe?

Answer 1

Tak, jest to możliwe! Trzeba ustawić dostosować dziedzinie

adjust : { 
    screen : true 
} 

gdzie można określić położenie podpowiedzi

position : { 
    my : 'right center', 
    at : 'left center', 
    adjust : { 
     screen : true 
    } 
} 

nie jestem pewien, czy jest to cecha qTip1 ale kiedyś w w qtip2. Podpowiedź regulowana automatycznie w celu uniknięcia przepełnienia i przewijania

Answer 2

należy ustawić celu końcówki się okno jak na Q-Tip dialog demo:

position: { 
     my: 'center', 
     at: 'center', 
     target: $(window) 
} 

Użytkownik może także ewentualnie stosować stałe położenia względem końcówki poprzez CSS, aby całkowicie zapobiec przewijaniu dialogów modalnych. qTip automatycznie dostosowuje się do wszystkich problemów przeglądarki z ustalonym pozycjonowaniem (kaszel IE). Na przykład:

.ui-tooltip { 
     position: fixed; 
} 

Albo, jeśli masz własne classnames:

.ui-tooltip-myClassName { 
     position: fixed; 
} 

w odniesieniu do drugiej odpowiedzi udzielonej pamiętać, że qTip2 ma inny format regulacji rzutni (nie jest już pozycja .adjust.screen jak to było w qTip1), aw szczególności pozwala na zdefiniowanie co zawierające element powinien być stosowany do regulacji:

position: { 
     viewport: $(window) 
} 

Albo, dla elementu zawierającego zamiast okna/s creen:

position: { 
     viewport: $('#myElement') 
} 

Można też teraz określić, w jaki sposób regulacja jest wykonana z parametrem „metoda” i może ograniczyć go tylko ustawić na jednej osi poprzez określenie „brak” dla drugiego. Domyślną/starszą metodą jest "przerzucanie", ale możesz także określić "przesunięcie", które tylko przesuwa końcówkę na tyle, aby zmieściło się w okienku ekranu. Format jest:

position: { 
     viewport: $(window), 
     adjust: { 
      method: '<method>' 
     } 
} 

Albo

position: { 
     viewport: $(window), 
     adjust: { 
      method: '<horizontalMethod> <verticalMethod>' 
     } 
} 

Na przykład:

position: { 
     viewport: $(window), 
     adjust: { 
      method: 'shift' 
     } 
} 


position: { 
     viewport: $(window), 
     adjust: { 
      // Only adjust tip position on the horizontal axis 
      method: 'shift none' 
     } 
}