首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >jquery对话框窗口中的偏离中心x

jquery对话框窗口中的偏离中心x
EN

Stack Overflow用户
提问于 2013-09-05 03:56:17
回答 2查看 2.1K关注 0票数 3

我使用的是一个标准的jquery对话框窗口,右上角关闭窗口的X按钮没有居中。我相信以前有人问过这个问题,我今天的谷歌技能还不够…任何帮助都将不胜感激。

没有“居中”的元素是

代码语言:javascript
运行
复制
 <span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>

它应该在

代码语言:javascript
运行
复制
 <span class="ui-button-text">close</span>

不能让jfiddle去工作。我也有一段时间没睡觉了..。

代码如下:

代码语言:javascript
运行
复制
 <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
 <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
 <!--<script src='spin.js'></script>-->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/smoothness/jquery-ui.css" rel="stylesheet" type="text/css"/>


 <script>
 $(function(){
$('#dialog').dialog({
    autoOpen: false,
    width: 800,

    modal: true,
    position: {
        my: "top",
        at: "top"
    },
    resizable: false,
    buttons: {
             "Go": function () {

                 $('#dialog').html('hello');
             },
            "Cancel": function () {

                 $(this).dialog("close");
             }
    }
});
$('#subButton').click(function () {
    $('#dialog').html("look at x");
    $('#dialog').dialog('open');
});
 });
 </script>
 <form name='stuff' method='POST'>
<input type='button' id='subButton' value='Confirm Settings'>
 </form>
 <div id='dialog'></div>
EN

回答 2

Stack Overflow用户

发布于 2013-12-04 11:46:55

当我的issue脚本和jQuery主题是不同的版本时,我遇到了这个问题。在我的例子中,我正在升级jQuery UI,没有考虑到需要更改样式表。

我的建议是要么重新捆绑所有内容并从头开始,要么找到通常在ThemeRoller中使用的主题,并用该样式表替换您的UI CSS。

票数 2
EN

Stack Overflow用户

发布于 2016-08-04 21:34:57

具体的问题是按钮图标的位置。.ui icon -closethick我使用了以下css和js:

代码语言:javascript
运行
复制
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css"/>
<script type="text/javascript" src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.1/jquery-ui.js"></script>

该问题仍然存在,对话框上的x按钮图标未对齐,并且页面上未引用任何其他css。我最终创建了一个覆盖来纠正按钮图标对齐问题。

代码语言:javascript
运行
复制
<style>
.ui-dialog-titlebar-close .ui-icon-closethick {
    position: relative !important;
    margin-top: -1px  !important; 
    margin-left: -8px  !important;
} 
</style>
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/18622692

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档