demos cho hộp thoại jquery ui tất cả đều sử dụng chủ đề "flora". Tôi muốn có một chủ đề tùy chỉnh, vì vậy tôi đã sử dụng themeroller để tạo một tệp css. Khi tôi sử dụng nó, mọi thứ dường như hoạt động tốt, nhưng sau đó tôi thấy rằng tôi không thể kiểm soát bất kỳ phần tử đầu vào nào có trong hộp thoại (tức là, không thể nhập vào trường văn bản, không thể chọn hộp kiểm). Điều tra thêm cho thấy điều này xảy ra nếu tôi đặt thuộc tính dialog là "modal" thành true. Điều này không xảy ra khi tôi sử dụng chủ đề thực vật.Sự cố với hộp thoại jquery khi sử dụng themeroller css
Dưới đây là file js:
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);
Đây là html mà sử dụng các chủ đề thực vật:
<!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>
Đây là html mà sử dụng các chủ đề ThemeRoller tải:
<!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>
Như bạn thấy, chỉ có tệp css được tham chiếu và tên lớp khác nhau. Bất kỳ ai có một đầu mối về những gì có thể sai?
@ David: Tôi đã thử nó và dường như không hoạt động (không phải trên FF hoặc IE). Tôi cố gắng inline css:
style="z-index:5000"
và tôi cũng đã thử nó tham khảo một file css bên ngoài:
#SERVICE03_DLG{z-index:5000;}
Nhưng không ai trong số những công việc. Tôi có thiếu cái gì trong những gì bạn đề nghị?
Chỉnh sửa:
Giải quyết bằng brostbeef!
Vì ban đầu tôi đã sử dụng hệ thực vật, tôi đã giả định nhầm rằng tôi phải chỉ định thuộc tính lớp. Hóa ra, điều này chỉ đúng khi bạn thực sự sử dụng chủ đề thực vật (như trong các mẫu). Nếu bạn sử dụng các chủ đề tùy chỉnh, xác định một thuộc tính lớp gây ra hành vi lạ.
Bạn vẫn gặp sự cố này ?? – MDCore
Không chắc chắn lý do tại sao bạn đã xóa mã của mình và các liên kết được thay thế ... hiện đã bị hỏng nên không thể tham chiếu. – clairestreb
oops, hoàn toàn quên mất điều đó. Tôi sẽ xem liệu tôi có thể chỉnh sửa bài đăng để mang lại mã không. – Ovesh