it-swarm.com.ru

Показать кнопку закрытия в правой части диалогового окна jQuery

Я создал jQuery Dialog как в этом Демо . Это работает правильно. кнопка закрытия отображается в правой части там. но на моем сайте, работающем на localhost, кнопка закрытия отображается слева, как на картинке ниже.

jQuery Dialog

Как я могу решить это?

Стиль кнопки закрытия

<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-dialog-titlebar-close" role="button" aria-disabled="false" title="close">
<span class="ui-button-icon-primary ui-icon ui-icon-closethick"></span>
<span class="ui-button-text">close</span>
</button>
10
Bishan

Разница между вашими примеры файлов и jsFiddle demo в том, что jsFiddle включает в себя тему jQueryUI, которая добавляет некоторые правила CSS в <button>.

Добавление любой темы jQueryUI в вашу демонстрацию устраняет проблему. Например, в том числе:

<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" rel='stylesheet' />

добавляет стиль:

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: .3em;
    top: 50%;
    width: 21px;
    margin: -10px 0 0 0;
    padding: 1px;
    height: 20px;
}

который включает position: absolute. Без positionright: 0, который я добавил в другом вопросе Скрыть строку заголовка и Показать кнопку закрытия в диалоге jQuery , не имеет никакого эффекта, что объясняет, почему кнопка появляется слева, так как именно там она будет естественным образом появляются в нормальном потоке .

Так что, если вы не используете тема jQueryUI , то вам нужно добавить position: absolute к правилам кнопки закрытия , например так:

.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    right: 0;
}
10
andyb

Одна возможность - стили противоречивы. Проверьте атрибуты CSS left: (или right:) в ваших файлах HTML и CSS. Я думаю, что стили для класса -

.ui-dialog .ui-dialog-titlebar-close

противоречивы.

Edit:

<head>
<script type="text/javascript" src="//code.jquery.com/jquery-1.9.1.js"></script>      
<script type="text/javascript" src="http://code.jquery.com/ui/1.9.2/jquery-ui.js"></script>
<link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.9.2/themes/base/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="/css/result-light.css">
<style type="text/css">
.ui-dialog {
    position: absolute;
    top: 0;
    left: 0;
    padding: .2em;
    outline: 0;
    overflow:visible;
}
.ui-dialog .ui-dialog-titlebar {
    background:transparent;
    border:none;
}
.ui-dialog .ui-dialog-title {
    display:none;
}
.ui-dialog .ui-dialog-titlebar-close {
    left:0;
}
.ui-dialog .ui-dialog-content {
    position: relative;
    border: 0;
    padding: .5em 1em;
    background: none;
    overflow: auto;
}
.ui-dialog .ui-dialog-buttonpane { border-width: 0 !important; }
.ui-dialog .ui-dialog-buttonpane .ui-dialog-buttonset {
    float: right;
}
.ui-dialog .ui-dialog-buttonpane button {
    margin: .5em .4em .5em 0;
    cursor: pointer;
}
.ui-dialog .ui-resizable-se {
    width: 12px;
    height: 12px;
    right: -5px;
    bottom: -5px;
    background-position: 16px 16px;
}
.ui-draggable .ui-dialog-titlebar {
    cursor: move;
}
.ui-resizable-handle.ui-resizable-s::before, .ui-resizable-handle.ui-resizable-s::after {
    content: "";
    width: 0;
    height: 0;
    position: absolute;
    left: 150px;
    border-style: solid;
    border-width: 10px;
}
.ui-resizable-handle.ui-resizable-s::before {
    border-color: #aaa transparent transparent transparent;
    top: 2px;
}
.ui-resizable-handle.ui-resizable-s::after {
    border-color: #fff transparent transparent transparent;
    top: 1px;
}
</style>
<script type="text/javascript">//<![CDATA[ 
$(window).load(function(){
$('#open').click(function() {
    $('#dialog').dialog('open');
});
$(document).ready(function () {
    $('#dialog').dialog({
        autoOpen: false,
        resizable: true,
        width: 300,
        height: 'auto',
        buttons: {
            "Save": function () {

            }
        }
    });
}); 
});//]]>  
</script>
</head>
2
GLES

это CSS, что вам нужно изменить :)

http://prntscr.com/1fwgfz

0
Žarko Selak