我正在使用jQuery 1.10.1 with migrate,jQueryUI 1.10.3,jQueryValidate 1.11.1。
只需使用简单的表单,它就有两个字段。在提交时,如果未提供值,则会显示一个带有消息的对话框。
问题:在IE 10中当用户尝试移动(拖动)错误消息对话框时,它只会向下移动。仅当浏览器窗口中出现垂直滚动条时才会发生这种情况。 在Chrome 27中验证它有效。有时在Firefox 21和Opera 12.15中会出现同样的问题。
注意:它适用于jQuery UI 1.10.2只有问题在1.10.3中。
示例来源
<html>
<head>
<style type="text/css">
.label {width:100px;text-align:right;float:left;padding-right:10px;font-weight:bold;}
.label1 {width:350px; text-align:right; padding-top:300px;padding-bottom:30px; font-weight:bold; }
</style>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<!-- <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.2/jquery-ui.min.js"></script> -->
<script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.3/jquery-ui.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>
<script>
$(function() {
$("#register-form").validate({
rules: { firstname: "required", lastname: "required" },
messages: { firstname: "Need First Name", lastname: "Need Last Name" },
showErrors: function(errorMap, errorList) {
$("#diverror").dialog({ modal: true });
},
submitHandler: function(form) {
form.submit();
}
});
});
</script>
</head>
<body>
<form method="post" id="register-form">
<div class="label">First Name</div><input type="text" id="firstname" name="firstname" /><br />
<div class="label">Last Name</div><input type="text" id="lastname" name="lastname" /><br />
<div class="label1">Making page to scroll. Scroll down to submit</div>
<div class="label1">Making page to scroll. Scroll down to submit</div>
<div class="label1">Making page to scroll. Scroll down to submit</div>
<div style="margin-left:140px;"><input type="submit" name="submit" value="Submit" /></div>
</form>
<div id="diverror" title="Basic dialog"><p>This is the default DIVERROR which is useful for displaying information.</p></div>
</body>
</html>