jQuery-UI模态表单关闭按钮的显示位置 [英] Jquery-UI modal form close button display position
问题描述
jquery ui模态形式右上角的关闭按钮显示问题. 我有一个例子: http://jqueryui.com/dialog/#modal-form
I have a display problem with the close button on the top right corner on jquery ui modal form. I had as an example: http://jqueryui.com/dialog/#modal-form
所以我做了: http://jsbin.com/atenac/3/edit
如果单击创建新用户"，则应该看到关闭图标未正确显示.
If you click Create new user you should see that the close icon is not displayed correctly.
我使用chrome(latest)和IE9进行了测试.它显示在实际容器的右下角.
I tested with chrome(latest) and IE9. And it is shown from the bottom right corner of the actual container.
主题是否有问题，或者我缺少什么? 如果您更改为基本cdn，则可以使用，但与其他CSS都不能使用.
Is there a problem with the themes, or am I missing something? If you change to base cdn it works, but with any other css it's not working.
代码:
<head>
<!-- base cdn: http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.0/themes/base/jquery-ui.css-->
<link rel="stylesheet" href="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.9.0/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.3.js"></script>
<script src="http://code.jquery.com/ui/1.10.0/jquery-ui.js"></script>
</head>
<body>
<div id="dialog-form" title="Create new user">
<p class="validateTips">
All form fields are required.</p>
<form>
<fieldset>
<label for="name">
Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">
Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">
Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<button id="create-user">
Create new user</button>
</body>
<script>
$(function () {
$("#dialog-form").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Create an account": function () {
allFields.removeClass("ui-state-error");
$(this).dialog("close");
},
Cancel: function () {
$(this).dialog("close");
}
},
close: function () {
allFields.val("").removeClass("ui-state-error");
}
});
$("#create-user")
.button()
.click(function () {
$("#dialog-form").dialog("open");
});
});
</script>
推荐答案
您似乎使用了错误的样式表(版本1.9.0).链接到CSS的1.10.0版似乎已解决了该问题: http://jsbin.com/atenac/8/edit
You seem to be using the incorrect stylesheet (version 1.9.0). Linking to version 1.10.0 of the CSS seems to have fixed it: http://jsbin.com/atenac/8/edit
正确的CSS链接是: http://ajax.aspnetcdn.com/ajax/jquery. ui/1.10.0/themes/smoothness/jquery-ui.css
The correct CSS link is: http://ajax.aspnetcdn.com/ajax/jquery.ui/1.10.0/themes/smoothness/jquery-ui.css
这篇关于jQuery-UI模态表单关闭按钮的显示位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
