내 jQuery 대화 상자를 중앙에 배치하려면 어떻게해야합니까?
다음 코드를 시도했지만 대화 상자 왼쪽 상단 모서리 위치를 가운데로 배치하고 요소가 오른쪽에 정렬되도록합니다. 요소 너비를 계산하는 실제 중심에 대화 상자를 중앙에 배치하여 중심선이 대화 상자를 50 % 50 % 절반으로 자르도록하려면 어떻게해야합니까?
$('.selector').dialog({ position: 'center' });
http://docs.jquery.com/UI/Dialog#option-position
위치를 정할 필요가 없다고 확신합니다.
$("#dialog").dialog();
이 기사를 살펴보고 대화 위치 지정에 대해 공식 jquery-ui 사이트 에서 말하는 내용도 확인했습니다. 여기서는 초기화 및 초기화 후의 두 가지 상태에 대해 논의했습니다.
코드 예제-(jQuery UI 2009-12-03에서 가져옴)
지정된 위치 옵션으로 대화 상자를 초기화하십시오.
$('.selector').dialog({ position: 'top' });
초기화 후 위치 옵션을 가져 오거나 설정합니다.
//getter
var position = $('.selector').dialog('option', 'position');
//setter
$('.selector').dialog('option', 'position', 'top');
위치 속성을 제거하면 자체적으로 중앙에 위치한다는 것을 알게 될 것입니다. 그렇지 않으면 "옵션" "위치"와 "중심"의 3 개 요소를 정의하는 두 번째 setter 옵션을 시도해보십시오.
최신 jQuery UI에는 위치 구성 요소가 있습니다.
$("#myDialog").position({
my: "center",
at: "center",
of: window
});
문서 : http://jqueryui.com/demos/position/ 가져
오기 : http://jqueryui.com/download
대화 상자에는 위치가 필요하므로 js 위치를 포함해야합니다.
<script src="jquery.ui.position.js"></script>
따라서 누군가가 내가 한 것처럼이 페이지를 방문하거나 15 분 후에 잊어 버렸을 때 iframe (blah)에서 ie8과 함께 jqueryui 대화 상자 버전 1.10.1 및 jquery 1.9.1을 사용하고 있으며 지정된 또는 작동하지 않습니다. 즉
position: {
my: "center bottom",
at: "center top",
of: $("#submitbutton"),
within: $(".content")
}
나를 올바른 방향으로 안내 해준 @ vm370에게 감사드립니다.
open: function () {
var win = $(window);
$(this).parent().css({
position: 'absolute',
left: (win.width() - $(this).parent().outerWidth()) / 2,
top: (win.height() - $(this).parent().outerHeight()) / 2
});
}
중앙 위치를 고정하기 위해 다음을 사용합니다.
open : function() {
var t = $(this).parent(), w = window;
t.offset({
top: (w.height() / 2) - (t.height() / 2),
left: (w.width() / 2) - (t.width() / 2)
});
}
이 시도....
$(window).resize(function() {
$("#dialog").dialog("option", "position", "center");
});
브라우저 창 중앙에 jQuery 대화 상자를 배치하는 데 가장 좋은 결과를 얻고 있습니다.
position: { my: "center bottom", at: "center center", of: window },
http://api.jqueryui.com/position/ 에있는 문서에 설명 된대로 " using " 옵션을 사용하여 위치를 지정하는 더 정확한 방법이있을 수 있지만 서두르고 있습니다.
dialog()대화 상자의 위치를 지정하려면 함수를 두 번 호출해야합니다 (jQuery v1.11.2 / jQueryUI v1.10.4).
$("#myDialog").dialog({
/* initial dialog parameters */
}).dialog({
position: {
my: "center center",
at: "center center",
of: window
}
});
다음 위치 매개 변수가 나를 위해 일했습니다.
position: { my: "right bottom", at: "center center", of: window },
행운을 빕니다!
Jquery UI 1.9.2, jquery 및 이후 버전은 IE8을 지원하지 않습니다.
나는 그것에 대한 두 가지 해결책을 찾았습니다.
jquery UI 1.7.2IE8 지원으로 롤백 ,이 코드를
Jquery UI 1.9.2
position: {my: "center", at: "center", of: $("body"),within: $("body") }
According to the following discussion, the problem could be due to less IE compatibility in the newer jQuery versions, reverting back to 1.7.2 seems to resolve the problem, which only occurs in IE8. http://forum.jquery.com/topic/jquery-ui-dialog-positioning-not-working-in-ie-8
Another thing that can give you hell with JQuery Dialog positioning, especially for documents larger than the browser view port - you must add the declaration
<!DOCTYPE html>
At the top of your document.
Without it, jquery tends to put the dialog on the bottom of the page and errors may occur when trying to drag it.
If you are using individual jquery files or a custom jquery download either way make sure you also have jquery.ui.position.js added to your page.
Are you running into this in IE only? If so, try adding this to the FIRST line of your page's HEAD tag:
<meta http-equiv="X-UA-Compatible" content="IE=7" />
I had though that all compatibility issues were fixed in later jQueries, but I ran into this one today.
Try this for older versions and somebody who don't want to use position:
$("#dialog-div-id").dialog({position: ['center', 'top'],....
You also need to do manual re-centering if using jquery ui on mobile devices - the dialog is manually positioned via a 'left & top' css property. if the user switches orientation, the positioning is no longer centered, and must be adapted / re-centered afterwards.
For Win7/IE9 environment just set in your css file:
.ui-dialog {
top: 100px;
left: 350px !important;
}
I had a problem with this and I finally figured this out. Until today I was using a really old version of jQuery, version 1.8.2.
Everywhere where I had used dialog I had initialised it with the following position option:
$.dialog({
position: "center"
});
However, I found that removing position: "center" or replacing it with the correct syntax didn't do the trick, for example:
$.dialog({
position: {
my: "center",
at: "center",
of: window
}
});
Although the above is correct, I was also using option to set the position as center when I loaded the page, in the old way, like so:
// The wrong old way of keeping a dialog centered
passwordDialogInstance.dialog("option", "position", "center");
This was causing all of my dialog windows to stick to the top left of the view port.
I had to replace all instances of this with the correct new syntax below:
passwordDialogInstance.dialog(
"option",
"position",
{ my: "center", at: "center", of: window }
);
I fixed with css:
.ui-dialog .ui-dialog-content {
width: 975px!important;
height: 685px!important;
position: fixed;
top: 5%;
left: 50%;
margin:0 0 0 -488px;
}
Could not get IE9 to center the dialog.
Fixed it by adding this to the css:
.ui-dialog {
left:1%;
right:1%;
}
Percent doesn't matter. Any small number worked.
참고URL : https://stackoverflow.com/questions/1839702/how-can-i-position-my-jquery-dialog-to-center
'IT박스' 카테고리의 다른 글
| maven-site 플러그인 3.3 java.lang.ClassNotFoundException : org.apache.maven.doxia.siterenderer.DocumentContent (0) | 2020.11.17 |
|---|---|
| 상대 URL을 전체 URL로 바꾸려면 어떻게합니까? (0) | 2020.11.17 |
| Java에서 문자열 배열 반복 (0) | 2020.11.16 |
| iOS UISearchBar에서 검색 (입력 속도 기준)을 제한하는 방법은 무엇입니까? (0) | 2020.11.16 |
| Jest 캐시를 지우는 방법? (0) | 2020.11.16 |