6
jquery UI 대화 상자의 demos 모두 "식물"테마를 사용합니다. 사용자 정의 테마가 필요했기 때문에 themeroller를 사용하여 CSS 파일을 생성했습니다. 내가 사용했을 때 모든 것이 잘 작동하는 것처럼 보였지만 나중에 대화 상자에 포함 된 입력 요소를 제어 할 수 없다는 것을 알았습니다 (즉, 텍스트 필드에 입력 할 수없고 확인란을 선택할 수 없음). 추가 조사를 통해 대화 속성 "모달"을 true로 설정하면이 문제가 발생한다는 사실이 밝혀졌습니다. 식물상 주제를 사용할 때 이런 일은 발생하지 않습니다.themeroller css를 사용할 때 jquery 대화 상자의 문제점
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="jquery-ui-themeroller.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="ui-dialog">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=Shift_JIS">
<title>sample</title>
<script src="jquery-1.2.6.min.js" language="JavaScript"></script>
<link rel="stylesheet" href="flora/flora.all.css" type="text/css">
<script src="jquery-ui-personalized-1.5.2.min.js" language="JavaScript"></script>
<script src="TopMenu.js" language="JavaScript"></script>
</head>
<body>
<input type="button" value="click me!" id="my_button">
<div id="SERVICE03_DLG" class="flora">please enter something<br><br>
<label for="something">somthing:</label> <input name="something" id="something" type="text" maxlength="20" size="24">
</div>
</body>
</html>
topMenu = {
init: function(){
$("#my_button").bind("click", function(){
$("#SERVICE03_DLG").dialog("open");
$("#something").focus();
});
$("#SERVICE03_DLG").dialog({
autoOpen: false,
modal: true,
resizable: false,
title: "my title",
overlay: {
opacity: 0.5,
background: "black"
},
buttons: {
"OK": function() {
alert("hi!");
},
"cancel": function() {
$(this).dialog("close");
}
},
close: function(){
$("#something").val("");
}
});
}
}
$(document).ready(topMenu.init);
보시다시피, 참조 된 CSS 파일과 클래스 이름 만 다릅니다. 누가 잘못 될 수 있는지에 대한 단서가 있습니까?
@David : 시도해 보았지만 작동하지 않는 것으로 보입니다 (FF 또는 IE에서도 아님). 나는 인라인 CSS를 시도 :
style="z-index:5000"
을하고 또한 외부 CSS 파일 참조를 시도했다 :
#SERVICE03_DLG{z-index:5000;}
그러나이 작품의도를. 네가 제안한 것에 뭔가 빠졌어?
편집 :
해결 방법 : brostbeef!
원래 플로라를 사용하고 있었기 때문에 실수로 클래스 속성을 지정해야한다고 생각했습니다. 사실, 플로라 테마를 실제로 사용하는 경우에만 해당됩니다 (샘플 에서처럼). 사용자 정의 테마를 사용하는 경우 클래스 속성을 지정하면 이상한 동작이 발생합니다.
아직이 문제가 있습니까? – MDCore
코드 및 대체 링크를 제거한 이유를 지금 알 수 없으므로 잘 모르겠습니다. – clairestreb
죄송합니다. 완전히 잊어 버렸습니다. 코드를 다시 가져올 수 있도록 게시물을 편집 할 수 있는지 확인합니다. – Ovesh