윈도우 엣지와 관련하여 팝오버의 X 위치를 기준으로 부트스트랩 팝오버의 위치를 변경?
저는 인터넷을 샅샅이 뒤졌고 이 스택 오버플로우 게시물이 통찰력이 있다는 것을 발견했습니다. 화면 너비를 기준으로 부트스트랩 팝업의 위치를 변경할 수 있습니까? 그러나 위치/오프셋을 이해하는 데 문제가 있어서인지 여전히 질문에 답하지 않았습니다.
제가 하려는 일은 이렇습니다.핫스팟 팝업이 뷰포트 너머에 위치하지 않는 한 Twitter Bootstap Popover 위치가 오른쪽이 되도록 하고, 왼쪽이 되도록 위치하게 하고 싶습니다.핫스팟이 있는 iPad 웹 앱을 만들고 있는데 핫스팟을 누르면 정보가 나타나지만 가로 스크롤이 잠겼을 때 뷰포트 밖에 나타나지 않았으면 합니다.
이런 식으로 진행될 거라 생각합니다.
$('.infopoint').popover({
trigger:'hover',
animation: false,
placement: wheretoplace
});
function wheretoplace(){
var myLeft = $(this).offset.left;
if (myLeft<500) return 'left';
return 'right';
}
생각은?감사합니다!
배치 옵션이 문자열이거나 팝업 가능 링크를 클릭할 때마다 계산을 수행하는 문자열을 반환하는 함수일 수 있다는 것을 알게 되었습니다.
이를 통해 초기 $.각 기능 없이도 수행한 작업을 쉽게 복제할 수 있습니다.
var options = {
placement: function (context, source) {
var position = $(source).position();
if (position.left > 515) {
return "left";
}
if (position.left < 515) {
return "right";
}
if (position.top < 110){
return "bottom";
}
return "top";
}
, trigger: "click"
};
$(".infopoint").popover(options);
부트스트랩 3은.
placement: 'auto right'
그게 더 쉬운 거지기본적으로 오른쪽이지만 요소가 화면 오른쪽에 있으면 팝업이 남습니다.그렇다면 다음과 같습니다.
$('.infopoint').popover({
trigger:'hover',
animation: false,
placement: 'auto right'
});
사용할 수 있는 설명서에 기초하여auto선호하는 장소와 조합하여, 예를 들어.auto left
http://getbootstrap.com/javascript/ #팝오버: "자동"을 지정하면 팝오버의 방향이 동적으로 바뀝니다.예를 들어 배치가 "자동 왼쪽"인 경우 도구 설명이 가능하면 왼쪽으로 표시되고 그렇지 않으면 오른쪽으로 표시됩니다."
저는 같은 작업을 시도하다가 이 기능이 이미 존재한다는 것을 깨달았습니다.
그래서 효과적으로 할 수 있는 방법을 찾았습니다.특정 프로젝트의 경우 iPad 웹사이트를 구축하고 있어서 화면 가장자리에 도달하기 위한 픽셀 X/Y 값을 정확히 알 수 있었습니다.X 값과 Y 값이 달라집니다.
어차피 인라인 스타일링으로 팝오버를 배치하고 있기 때문에 각 링크의 왼쪽과 위쪽 값만 잡고 팝오버의 방향을 결정하면 됩니다.이 작업은 .popover()가 실행할 때 사용하는 html5 data-value를 추가하여 수행됩니다.
if ($('.infopoint').length>0){
$('.infopoint').each(function(){
var thisX = $(this).css('left').replace('px','');
var thisY = $(this).css('top').replace('px','');
if (thisX > 515)
$(this).attr('data-placement','left');
if (thisX < 515)
$(this).attr('data-placement','right');
if (thisY > 480)
$(this).attr('data-placement','top');
if (thisY < 110)
$(this).attr('data-placement','bottom');
});
$('.infopoint').popover({
trigger:'hover',
animation: false,
html: true
});
}
모든 의견/개선 사항은 환영하지만 수동으로 값을 입력할 의사가 있다면 이렇게 하면 작업이 완료됩니다.
bchhun의 답변은 제가 올바른 길을 걷게 해주었지만, 저는 소스와 뷰포트 엣지 사이에 사용 가능한 실제 공간을 확인하고 싶었습니다.또한 공간이 부족할 경우 적절한 폴백을 사용하여 데이터 배치 속성을 선호하는 것으로 존중하고 싶었습니다.예를 들어, 오른쪽에 팝업이 표시될 공간이 충분하지 않은 한, 그 "오른쪽"은 항상 오른쪽으로 이동할 것입니다.이것이 제가 처리하는 방식이었습니다.저는 괜찮지만, 좀 번거롭게 느껴집니다.좀 더 깔끔하고 간결한 해결책을 생각하는 사람이 있다면 보고 싶습니다.
var options = {
placement: function (context, source) {
var $win, $source, winWidth, popoverWidth, popoverHeight, offset, toRight, toLeft, placement, scrollTop;
$win = $(window);
$source = $(source);
placement = $source.attr('data-placement');
popoverWidth = 400;
popoverHeight = 110;
offset = $source.offset();
// Check for horizontal positioning and try to use it.
if (placement.match(/^right|left$/)) {
winWidth = $win.width();
toRight = winWidth - offset.left - source.offsetWidth;
toLeft = offset.left;
if (placement === 'left') {
if (toLeft > popoverWidth) {
return 'left';
}
else if (toRight > popoverWidth) {
return 'right';
}
}
else {
if (toRight > popoverWidth) {
return 'right';
}
else if (toLeft > popoverWidth) {
return 'left';
}
}
}
// Handle vertical positioning.
scrollTop = $win.scrollTop();
if (placement === 'bottom') {
if (($win.height() + scrollTop) - (offset.top + source.offsetHeight) > popoverHeight) {
return 'bottom';
}
return 'top';
}
else {
if (offset.top - scrollTop > popoverHeight) {
return 'top';
}
return 'bottom';
}
},
trigger: 'click'
};
$('.infopoint').popover(options);
이 제품도 사용해보실 수 있고요.
가져오기 에서 /
=> 높이보다 의이팁다인지인지다의>이팁e>r
=>를 위로 만 하면 =>쪽이팁다면지로만다면다만면로쪽지>>enlfmpms,etp면t
placement: function(context, source){
//get target/source position in viewport
var bounds = $(source)[0].getBoundingClientRect();
winHeight = $(window).height();
//check wheather space from bottom is less that your tooltip height
var rBottom = winHeight - bounds.bottom;
//Consider 180 == your Tooltip height
//if space from bottom is less that your tooltip height, this will scrolls page up
//We are keeping tooltip position is fixed(at bottom)
if (rBottom < 180){
$('html, body').animate({ scrollTop: $(document).scrollTop()+180 }, 'slow');
}
return "bottom";
}
bchhun의 훌륭한 답변과 더불어 절대적인 포지셔닝을 원한다면 이렇게 할 수 있습니다.
var options = {
placement: function (context, source) {
setTimeout(function () {
$(context).css('top',(source.getBoundingClientRect().top+ 500) + 'px')
},0)
return "top";
},
trigger: "click"
};
$(".infopoint").popover(options);
Angular에서 내 문제를 해결했습니다.JS는 다음과 같습니다.
var configPopOver = {
animation: 500,
container: 'body',
placement: function (context, source) {
var elBounding = source.getBoundingClientRect();
var pageWidth = angular.element('body')[0].clientWidth
var pageHeith = angular.element('body')[0].clientHeith
if (elBounding.left > (pageWidth*0.34) && elBounding.width < (pageWidth*0.67)) {
return "left";
}
if (elBounding.left < (pageWidth*0.34) && elBounding.width < (pageWidth*0.67)) {
return "right";
}
if (elBounding.top < 110){
return "bottom";
}
return "top";
},
html: true
};
이 기능은 요소 위치를 기준으로 부트스트랩 팝오버의 위치를 최상의 위치로 이동시킵니다.
$scope.popoverPostion = function(event){
$scope.pos = '';
if(event.x <= 207 && event.x >= 140){
$scope.pos = 'top';
event.x = '';
}
else if(event.x < 140){
$scope.pos = 'top-left';
event.x = '';
}
else if(event.x > 207){
$scope.pos = 'top-right';
event.x = '';
}
};
위치를 자동으로 변경하는 간단한 방법은 다음과 같습니다.
$element.popover("update")
자세한 내용은 https://mdbootstrap.com/docs/b4/jquery/javascript/popovers/ 링크를 참조하십시오.
data-limit="auto left"와 같은 데이터 배치에서 auto를 사용할 수 있습니다.화면 크기에 따라 자동으로 조정되며 기본 배치가 남습니다.
페이지의 거의 모든 곳에 필요하다면 이것을 시도해 볼 수도 있습니다.
일반적인 방법으로 구성한 후 사용하면 됩니다.
이렇게 HTML 요소와 원하는 것을 사용할 수도 있습니다 :)
$(document).ready(function()
{
var options =
{
placement: function (context, source)
{
var position = $(source).position();
var content_width = 515; //Can be found from a JS function for more dynamic output
var content_height = 110; //Can be found from a JS function for more dynamic output
if (position.left > content_width)
{
return "left";
}
if (position.left < content_width)
{
return "right";
}
if (position.top < content_height)
{
return "bottom";
}
return "top";
}
, trigger: "hover"
, animation: "true"
, html:"true"
};
$('[data-toggle="popover"]').popover(options);
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="container">
<h3>Popover Example</h3>
<a id="try_ppover" href="#" data-toggle="popover" title="Popover HTML Header" data-content="<div class='jumbotron'>Some HTML content inside the popover</div>">Toggle popover</a>
</div>추가
더 많은 옵션을 설정하시려면 여기로 가시면 됩니다.
여기서 더 많은 것을 찾을 수 있습니다.
갱신하다
을 JS 으로 할 을 할 으로 을 trigger: "click" 식으로...
return ..;
}
......
, trigger: "click"
......
};
는 또한 HTML 에서 에서 커스터마이징 할 수 .data-trigger="click" 식으로...
<a id="try_ppover" href="#" data-toggle="popover" data-trigger="click" title="Popover Header" data-content="<div class='jumbotron'>Some content inside the popover</div>">Toggle popover</a>
좀 더 지향적인 코드가 될 것이고 재사용이 가능하며 모두에게 더 도움이 될 것이라고 생각합니다 :).
언급URL : https://stackoverflow.com/questions/9956958/changing-the-position-of-bootstrap-popovers-based-on-the-popovers-x-position-in
'programing' 카테고리의 다른 글
| Node.js console.log - 줄을 새로 만들지 않고 줄을 업데이트할 수 있습니까? (0) | 2023.09.14 |
|---|---|
| var_graphics를 텍스트 파일에 저장합니다. (0) | 2023.09.14 |
| Swift #selector 구문으로 컴파일 오류의 "모호한 사용"을 해결하려면 어떻게 해야 합니까? (0) | 2023.09.14 |
| 여러 열이 있는 오라클 롤업 함수 (0) | 2023.09.14 |
| 마이크로소프트.ACE.OLEDB.12.0' 공급자가 로컬 시스템(서버)에 등록되어 있지 않습니다. (0) | 2023.09.14 |