jQuery UI 대화 상자 위치
jQuery 대화 상자 UI 라이브러리 를 사용하여 텍스트 위에 커서를 놓을 때 대화 상자를 배치 하려고합니다 . jQuery 대화 상자는 현재 뷰포트의 왼쪽 상단 모서리에서 측정되는 위치 매개 변수를 사용합니다 (즉, [0, 0]현재 스크롤 한 위치에 관계없이 항상 브라우저 창의 왼쪽 상단 모서리에 배치 함). 그러나 위치를 검색하는 유일한 방법은 전체 페이지를 기준으로 한 요소입니다.
다음은 내가 현재 가지고있는 것입니다. position.top1200 정도의 값으로 계산되어 페이지의 나머지 내용 아래에 대화 상자가 표시됩니다.
$(".mytext").mouseover(function() {
position = $(this).position();
$("#dialog").dialog('option', 'position', [position.top, position.left]);
}
올바른 위치를 어떻게 찾을 수 있습니까?
감사!
대화 상자의 다른 구현에 대해서는 일부 jQuery 플러그인을 확인하십시오. Cluetip 은 기능이 풍부한 툴팁 / 대화 형 플러그인으로 보입니다. 네 번째 데모는 당신이하려는 것과 비슷하게 들립니다 (그러나 당신이 찾고있는 정확한 위치 지정 옵션이 없다는 것을 알았습니다.)
대안으로 사용할 수있는 jQuery를 UI의 Position유틸리티 등을
$(".mytext").mouseover(function() {
var target = $(this);
$("#dialog").dialog("widget").position({
my: 'left',
at: 'right',
of: target
});
}
위의 몇 가지 답변 덕분에 실험하고 궁극적으로 모달 대화 상자 정의에서 "위치"속성을 편집하기 만하면됩니다.
position:['middle',20],
JQuery는 가로 "X"값의 "중간"텍스트에 문제가 없었으며 대화 상자가 가운데에서 20px 아래로 팝업되었습니다.
나는 JQuery를 좋아한다.
모든 답글을 읽은 후 마침내 나를 위해 일했습니다.
$(".mytext").mouseover(function() {
var x = jQuery(this).position().left + jQuery(this).outerWidth();
var y = jQuery(this).position().top - jQuery(document).scrollTop();
jQuery("#dialog").dialog('option', 'position', [x,y]);
});
Jaymin의 예제를 한 단계 더 발전 시키면 방금 클릭 한 요소 위에 jQuery UI 대화 상자 요소를 배치하기 위해이 문제를 생각해 냈습니다 ( "음성 거품"이라고 생각하십시오).
$('#myDialog').dialog( 'open' );
var myDialogX = $(this).position().left - $(this).outerWidth();
var myDialogY = $(this).position().top - ( $(document).scrollTop() + $('.ui-dialog').outerHeight() );
$('#myDialog').dialog( 'option', 'position', [myDialogX, myDialogY] );
상대 너비 및 높이 오프셋을 계산하기 전에 ui-dialog 요소를 "열기"는 점에 유의하십시오. 페이지에 ui-dialog 요소가 실제로 나타나지 않으면 jQuery가 outerWidth () 또는 outerHeight ()를 평가할 수 없기 때문입니다.
대화 옵션에서 'modal'을 false로 설정하면 a-OK 여야합니다.
http://docs.jquery.com/UI/API/1.8/Dialog
왼쪽 상단의 고정 대화 상자 예 :
$("#dialogId").dialog({
autoOpen: false,
modal: false,
draggable: false,
height: "auto",
width: "auto",
resizable: false,
position: [0,28],
create: function (event) { $(event.target).parent().css('position', 'fixed');},
open: function() {
//$('#object').load...
}
});
$("#dialogOpener").click(function() {
$("#dialogId").dialog("open");
});
당신의 확인 <!DOCTYPE html>
I've noticed that if you miss out the <!DOCTYPE html> from the top of your HTML file, the dialog is shown centred within the document content not within the window, even if you specify position: { my: 'center', at: 'center', of: window}
EG: http://jsfiddle.net/npbx4561/ - Copy the content from the run window and remove the DocType. Save as HTML and run to see the problem.
To put it right on top of control, you can use this code:
$("#dialog-edit").dialog({
...
position: {
my: 'top',
at: 'top',
of: $('#myControl')
},
...
});
$(".mytext").mouseover(function() {
var width = 250;
var height = 270;
var posX = $(this).offset().left - $(document).scrollLeft() - width + $(this).outerWidth();
var posY = $(this).offset().top - $(document).scrollTop() + $(this).outerHeight();
$("#dialog").dialog({width:width, height:height ,position:[posX, posY]});
}
Positions a dialog just under an element. I used offset() function just because it calculates the position relative to upper left corner of the browser, but position() function calculates the position relative to parent div or iframe that parent of the element.
instead of doing pure jquery, i would do:
$(".mytext").mouseover(function() {
x= $(this).position().left - document.scrollLeft
y= $(this).position().top - document.scrollTop
$("#dialog").dialog('option', 'position', [y, x]);
}
if i am understanding your question correctly, the code you have is positioning the dialog as if the page had no scroll, but you want it to take the scroll into account. my code should do that.
This page shows how to determine your scroll offset. jQuery may have similar functionality but I couldn't find it. Using the getScrollXY function shown on the page, you should be able to subtract the x and y coords from the .position() results.
a bit late but you can do this now by using $j(object).offset().left and .top accordingly.
I don't think the speech bubble is quite right. I tweaked it a bit so that it would work and the item opens right under the link.
function PositionDialog(link) {
$('#myDialog').dialog('open');
var myDialogX = $(link).position().left;
var myDialogY = $(link).position().top + $(link).outerHeight();
$('#myDialog').dialog('option', 'position', [myDialogX, myDialogY]);
}
To fix center position, I use:
open : function() {
var t = $(this).parent(), w = window;
t.offset({
top: (w.height() / 2) - (t.height() / 2),
left: (w.width() / 2) - (t.width() / 2)
});
}
Here is the code..,how to position the jQuery UI dialog to center......
var $about = $("#about");
$("#about_button").click(function() {
$about.dialog({
modal: true,
title: "About the calendar",
width: 600,
close: function() {
$about.dialog("destroy");
$about.hide();
},
buttons: {
close : function() {
$about.dialog("close");
}
}
}).show();
$about.dialog("option", "position", 'center');
});
$("#myid").dialog({height:"auto",
width:"auto",
show: {effect: 'fade', speed: 1000},
hide: {effect: 'fade', speed: 1000},
open: function( event, ui ) {
$("#myid").closest("div[role='dialog']").css({top:100,left:100});
}
});
you can use $(this).offset(), position is related to the parent
I've tried all the proposed solutions but they won't work because the dialog is not part of the main document and will has its own layer (but thats my educated guess).
- Initialize the dialog with
$("#dialog").dialog("option", "position", 'top') - Open it with
$(dialog).dialog("open"); Then get the x and y of the displayed dialog (not any other node of the document!)
var xcoord = $(dialog).position().left + ADD_MODIFIER_FOR_X_HERE;var ycoord= $(dialog).position().top + ADD_MODIFIER_FOR_Y_HERE;$(dialog).dialog('option', 'position', [xcoord , ycoord]);
This way the coordinates are from the dialog not from the document and the position is altered according to the layer of the dialog.
I tried for many ways to get my dialog be centered on the page and saw that the code:
$("#dialog").dialog("option", "position", 'top')
never change the dialog position when this was created.
Instead of, I change the selector level to get the entire dialog.
$("#dialog").parent() <-- This is the parent object that the dialog() function create on the DOM, this is because the selector $("#dialog") does not apply the attributes, top, left.
To center my dialog, I use the jQuery-Client-Centering-Plugin
$("#dialog").parent().centerInClient();
above solutions are very true...but the UI dialog does not retain the position after window is resized. below code does this
$(document).ready(function(){
$(".test").click(function(){
var posX = $(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();
console.log("in click function");
$(".abc").dialog({
position:[posX,posY]
});
})
})
$(window).resize(function(){
var posX=$(".test").offset().left - $(document).scrollLeft() + $(".test").outerWidth();
var posY = $(".test").offset().top - $(document).scrollTop() + $(".test").outerHeight();
$(".abc").dialog({
position:[posX,posY]
});
})
You ca set top position in style for display on center, saw that the code:
.ui-dialog{top: 100px !important;}
This style should show dialog box 100px bellow from top.
참고URL : https://stackoverflow.com/questions/744554/jquery-ui-dialog-positioning
'IT박스' 카테고리의 다른 글
| HTML 테이블에 가로 스크롤 막대 추가 (0) | 2020.07.26 |
|---|---|
| 토큰 인증 및 쿠키 (0) | 2020.07.26 |
| Python 3에서 수백만 개의 정규식 대체 속도 향상 (0) | 2020.07.26 |
| 안드로이드에서 벨소리 / 알람 사운드를 재생하는 방법 (0) | 2020.07.26 |
| Vim : 비주얼 블록 모드에서 삽입하는 방법? (0) | 2020.07.25 |