| 제목 | 구글 웹사이트 번역기와 jquery-ui 충돌로 dialog가 강제이동되고 있습니다. | ||
|---|---|---|---|
| 카테고리 | JavaScript | ||
| 글쓴이 | 골드잉여 | 작성시각 | 2017/05/02 10:21:40 |
|
|
|||
|
안녕하십니까. CI관련 질문이 아님에도 불구하고, 여러 선배님들께서 답변을 잘 해주셔서 CI포럼에 자꾸 질문을 드리게 되는 것 같습니다.
홈페이지에서 팝업창으로 Jquery-ui dialog 박스를 잘 사용했는데, 어느날 갑자기 창이 오른쪽으로 밀리는 현상이 발생하여 하나씩 원인을 제거하며 찾다보니 구글 웹사이트 번역기가 문제가 되는 것 같습니다. 나름 여러 방법을 써보고 찾아도 봤는데 해결할 수 있는 방법을 도저히 모르겠습니다. 방향이라도 알려주시면 다시 공부해보도록 하겠습니다.
코드는 아래와 같습니다.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en'}, 'google_translate_element');
}
</script>
<script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script>
</head>
<body style="width:500px;margin:auto;">
<p>body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ body comment~ </p>
<div class="popup0_dialog" title="NOTICE">
<p>This dialog box will be pushed right.</p>
</div>
<script type="text/javascript">
$(document).ready(function () {
// catation dialog 옵션
$(".popup0_dialog").dialog({
dialogClass: "popup0_dialog_class",
position: {my: "center top ", at: "center top+100", of: "body"},
});
});
</script>
</div>
</body>
</html>
사이트는 아래와 같으며, 위에 주소는 정상적인 것, 아래 것은 번역기 js를 넣은 후 밀리는 현상이 발생하는 것입니다. http://kimkakaka.dothome.co.kr/dialog_fixed.html http://kimkakaka.dothome.co.kr/dialog_moving_right.html (위의 코드는 유지하되, 호스팅 파일은 계속 유지할 수 가 없어서 일정 기간이 지난 후 삭제하도록 하겠습니다) |
|||
| 다음글 | DBA이신분들께 mysql 서버 연동에 대해 문의 하고... (2) | ||
| 이전글 | 드레그엔드롭 (4) | ||
|
닉
/
2017/05/02 13:46:19 /
추천
0
|
|
골드잉여
/
2017/05/02 14:46:55 /
추천
0
닉님 정말 감사합니다. 계속 봤는데 저 값이 바뀌는 것을 왜 못봤을까요? ㅠㅠ 처음 해결책으로는 body{ position: static !important} 로 해결하려고 생각했습니다. 그런데 body에 넓이를 준 것이 일반적인 코딩이 아닐수도 있겠다는 생각이 들어서, body 바로 밑단에 div를 하나 말들어서 width 값을 주는 것으로 해결하는 것이 나을 것 같습니다. (혹시 다른 좋은 방법이 있으면 추천 부탁드립니다) 이것 때문에 거의 하루를 고민했는데 정말 감사합니다. |
|
닉
/
2017/05/02 18:45:57 /
추천
0
@골드잉여 그렇게 하시면 될거같아요 ^^
|
봐봤는데 옆으로 가는이유는 position: absolute; left :805.5px; 이 코드에 의해서 옆으로 가는거고요.
구글 번역기 넣으면 바디에 postion :relative가 들어가서 옆으로 가는거에요.