JQuery UI диалог: как инициализировать без строки заголовка?

254

Можно ли открыть диалоговое окно jQuery UI без строки заголовка?

Loony2nz
источник

Ответы:

289

Я думаю, что лучшим решением является использование этой опции dialogClass.

Выдержка из документов JQuery UI:

во время init: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

или если вы хотите после init. :

$('.selector').dialog('option', 'dialogClass', 'noTitleStuff');

Итак, я создал диалог с опцией dialogClass = 'noTitleStuff' и css вот так:

.noTitleStuff .ui-dialog-titlebar {display:none}

слишком просто !! но я потратил 1 день, чтобы подумать, почему мой предыдущий метод сверления id-> class не работал. Фактически, когда вы вызываете .dialog()метод, преобразованный вами div становится потомком другого div (реального div диалогового окна) и, возможно, «братом» titlebardiv, поэтому очень трудно попытаться найти последний, начиная с первого.

Мицар
источник
2
+1 Решение Джонатана не работает для конкретного диалога. Ваш делает.
Четнар
1
Я согласен с Мицаром. Это лучшее решение, потому что оно позволяет вам быть специфичным для тех диалоговых окон, в которых есть только тот класс, который вы определили.
Карлос Пинто
2
Единственным недостатком этого метода является то, что Chrome добавляет вертикальную полосу прокрутки для такого диалога, когда он настроен как модальный, потому что каким-то образом jQuery начинает неправильно вычислять высоту оверлея-виджета-оверлея ... Я не копал глубже и не делал не найти быстрое решение, кроме hacky {переполнение: скрыто}
dimsuz
1
dialogClass устарел в jquery v 1.12 и не влияет на объект диалога, как предполагалось.
Мини-холодильник
1
Параметр dialogClass устарел в пользу опции классов, используя свойство ui-dialog.
Сандип Сароха
96

Я нашел решение для динамического удаления строки заголовка.

$("#example").dialog(dialogOpts);
// remove the title bar
$(".ui-dialog-titlebar").hide();

Это удалит все элементы с классом 'ui-dialog-titlebar' после отображения диалогового окна.

Loony2nz
источник
3
... а опция css исключает возможность их появления раньше. Я не уверен, что вижу какую-то выгоду в вашей альтернативе. В действительности, ваша альтернатива будет делать то, что я сделал, только добавив дополнительный шаг. Переход по CSS-маршруту будет быстрее.
Сэмпсон
10
Ну, мой вариант будет только удалить строку заголовка для этого одного диалога. Если бы я использовал ваш вариант, я бы удалил строку заголовка для всех моих диалогов. Я вижу в будущем, что мне понадобится строка заголовка.
Loony2nz
2
Таким образом , вы включаете свой элемент внутри CSS-правила: #example .ui-dialog-titlebar.... Это будет работать в любом случае; но Javascript в конце концов установит CSS, поэтому я не вижу преимущества в том, чтобы не делать это в CSS для начала. Это действительно не имеет большого значения - независимо от того, с чем вам удобнее всего :)
Sampson
2
Это только у меня или #example не имеет рамки над заголовком диалога?
Рио
2
@ Печенье из рисовой муки: .hide () должен идти после .dialog (), потому что .dialog () - это то, что вводит разметку для диалога на страницу. До этого вызова на странице еще нет диалоговых элементов.
Джереми Вибе
62

Я считаю, что вы можете скрыть это с помощью CSS:

.ui-dialog-titlebar {
    display: none;
}

Кроме того, вы можете применить это к определенным диалогам с dialogClassопцией:

$( "#createUserDialog" ).dialog({
    dialogClass: "no-titlebar"
});
.no-titlebar .ui-dialog-titlebar {
    display: none;
}

Проверьте " Theming " диалог. Вышеупомянутое предложение использует dialogClassопцию, которая, по-видимому, находится в процессе выхода в пользу нового метода.

Сэмпсон
источник
Да, думаю, это сработает, но это глобальный вариант. Мне было интересно, если есть способ сделать это с опциями. Я думаю, я могу сделать некоторые предварительные рендеринга jquery'ness, чтобы удалить заголовок div, прежде чем он будет показан.
Loony2nz
2
Я не верю, что есть возможность удалить его. По умолчанию это кнопка закрытия, в некотором смысле это почти плохой дизайн.
Сэмпсон
3
Когда люди слишком много говорят о css, они по буквам смешные, не правда ли
бобобобо
Также вам, вероятно, не следует удалять его, так как после этого вы больше не можете перемещать диалог. Вероятно, лучше не помещать текст в него и не изменять его, чтобы он был темным и тонким
бобобо
Если у вас есть какое-то другое событие, которое вызывает метод закрытия диалогового окна, то могут быть случаи, когда вам не нужна кнопка закрытия в строке заголовка.
Карлос Пинто
55

Я использую это в своих проектах

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();
Амироуч Дуда
источник
7
Еще лучше: уберите заголовок заголовка, но не кнопку закрытия. Сохраняйте его функциональность. $(document).ready(function() { $('#video').click(function(){ $( "#dialog" ).dialog().siblings('.ui-dialog-titlebar').removeClass('ui-widget-header'); }); });
Адриан П.
$("#myDialog").dialog('open').siblings('.ui-dialog-titlebar').remove();лучший ответ на мой взгляд +1 для этой строки кода
Jaylen
Или вы можете просто найти предыдущего брата, который является строкой заголовка: .ui-dialog-titlebar: $("#myDialog").prev().hide()или $("#myDialog").prev(".ui-dialog-titlebar").hide().
Андрей
Проголосуй, потому что у меня есть два деления, и я хотел скрыть только один.
Маркус Беккер,
15

Это сработало для меня:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },
Koder
источник
1
Это скроет заголовки во всех диалогах. Мое предложение ниже (следующий ответ) сделает это только для текущего открывающегося диалога.
ингридиент_15939
Хорошо ... Это означает, что мне не нужно делать каждый диалог скрытым из-за базового класса CSS ... также означает, что мне не нужно настраивать мой диалог отдельно, а затем удалять заголовок.
Гвассхоппа
8

Попробуйте использовать

$("#mydialog").closest(".ui-dialog-titlebar").hide();

Это скроет все заголовки диалогов

$(".ui-dialog-titlebar").hide();
Фирас Абд Алрахман
источник
7

На самом деле есть еще один способ сделать это, используя диалог widgetнапрямую:

Вы можете получить виджет диалога таким образом

$("#example").dialog(dialogOpts);
$dlgWidget = $('#example').dialog('widget');

а затем сделать

$dlgWidget.find(".ui-dialog-titlebar").hide();

скрыть только titlebarвнутри этого диалога

и в одной строке кода (мне нравится цепочка):

$('#example').dialog('widget').find(".ui-dialog-titlebar").hide();

Не нужно добавлять дополнительный класс в диалог таким образом, просто перейдите к нему напрямую. Работа хорошо для меня.

odedbd
источник
5

Я считаю более эффективным и более читабельным использование события open и скрытие строки заголовка оттуда. Мне не нравится использовать поиск имени класса по всему миру.

open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); }

Просто.

ingredient_15939
источник
2
Это метод, который я использовал, но использовал функцию create: так, чтобы она всегда была скрыта, а не только при отображении диалога. Я также изменил его на .remove () вместо .hide (), чтобы он полностью исчез из диалога.
Крис Портер
4

Вы можете использовать jquery, чтобы скрыть заголовок заголовка после использования dialogClass при инициализации диалога.

во время init:

$('.selector').dialog({
    dialogClass: 'yourclassname'
});

$('.yourclassname div.ui-dialog-titlebar').hide();

Используя этот метод, вам не нужно менять файл CSS, и это тоже динамично.

Арун Васудеван Наир
источник
1
Да, это было решение Mizar - опубликовано за 6 месяцев до вашего.
Кирк Уолл
Я согласен, но тогда вам также нужно будет добавить запись CSS, которая усложнит решение. Мое предложение решает проблему, используя только jQuery.
Арун Васудеван Наир
4

Мне нравится переопределять виджеты jQuery.

(function ($) {
    $.widget("sauti.dialog", $.ui.dialog, {
        options: {
            headerVisible: false
        },
        _create: function () {
            // ready to generate button
            this._super("_create"); // for 18 would be $.Widget.prototype._create.call(this);
            // decide if header is visible
            if(this.options.headerVisible == false)
                this.uiDialogTitlebar.hide();
        },
        _setOption: function (key, value) {
            this._super(key, value); // for 1.8 would be $.Widget.prototype._setOption.apply( this, arguments );
            if (key === "headerVisible") {
                if (key == false)
                    this.uiDialogTitlebar.hide();
                else
                    this.uiDialogTitlebar.show();
                return;
            }
        }
    });
})(jQuery);

Теперь вы можете настроить, хотите ли вы показывать строку заголовка или нет

   $('#mydialog').dialog({
      headerVisible: false // or true
});
Андрей Каурин
источник
4

Если у вас есть несколько диалогов, вы можете использовать это:

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });
m4dd
источник
3

Это самый простой способ сделать это, и он удалит заголовок только в этом конкретном диалоге;

$('.dialog_selector').find('.ui-dialog-titlebar').hide();
pdubbb1
источник
2

Одна вещь, которую я обнаружил, скрывая заголовок Dialog, - это то, что, даже если display отсутствует, программы чтения с экрана все равно поднимают его и будут читать. Если вы уже добавили свою собственную строку заголовка, она будет читать оба, вызывая путаницу.

То, что я сделал, было удалено из DOM с помощью $(selector).remove(). Теперь программы чтения с экрана (и все остальные) не увидят его, потому что он больше не существует.

user616258
источник
2

Попробуй это

$("#ui-dialog-title-divid").parent().hide();

заменить dividна соответствующийid

abdulkaderjeelani
источник
2

Эта следующая форма устранила мне проблему.

$('#btnShow').click(function() {
  $("#basicModal").dialog({
    modal: true,
    height: 300,
    width: 400,
    create: function() {
      $(".ui-dialog").find(".ui-dialog-titlebar").css({
        'background-image': 'none',
        'background-color': 'white',
        'border': 'none'
      });
    }
  });
});
#basicModal {
  display: none;
}
<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.10.3/themes/smoothness/jquery-ui.css" />
<div id="basicModal">
  Here your HTML content
</div>
<button id="btnShow">Show me!</button>

jcromeros1987
источник
1

Это помогло мне скрыть строку заголовка диалогового окна:

$(".ui-dialog-titlebar" ).css("display", "none" );
user1712742
источник
1

Вот как это можно сделать.

Перейдите в папку с темами -> base -> open jquery.ui.dialog.css

найти

Подписок

если вы не хотите отображать titleBar, просто установите display: none, как я сделал в следующем.

.ui dialog.ui-dialog .ui-dialog-titlebar 
{
    padding: .4em 1em;
    position: relative;
        display:none;
}

Самиларлы за титул тоже.

.ui-dialog .ui-dialog-title {
    float: left;
    margin: .1em 0;
    white-space: nowrap;
    width: 90%;
    overflow: hidden;
    text-overflow: ellipsis;
    display:none; 
}

Теперь приходит кнопка закрытия, вы также можете установить его нет или вы можете установить его

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

   display:none;

}

Я сделал много поисков, но ничего, тогда у меня возникла эта идея. Однако это приведет к тому, что у всего приложения не будет кнопки закрытия, строки заголовка для диалога, но вы также можете преодолеть это, используя jquery, добавляя и устанавливая css через jquery.

вот синтаксис для этого

$(".specificclass").css({display:normal})
ProgrammingNinja
источник
1
Это работает и полезно понимать, что это можно сделать, но если у вас есть несколько .dialogs()и эти настройки нужны только 1 или около того, то есть альтернативные маршруты, чем глобальное применение настроек таким способом.
Chef_Code
0

Я все еще хотел использовать изменяемые углы, просто не хотел видеть диагональные линии. я использовал

$(".ui-resizable-handle").css("opacity","0");

Просто понял, что я комментирую не тот вопрос. Дожить до моего тезки :(

controlZ
источник
0

Вы пробовали решение из документов JQuery UI? https://api.jqueryui.com/dialog/#method-open

Как говорится, вы можете сделать это так ...

В CSS:

.no-titlebar .ui-dialog-titlebar {
  display: none;
}

В JS:

$( "#dialog" ).dialog({
  dialogClass: "no-titlebar"
});
Олег Всильдеревьев
источник
-1

Вы можете удалить панель со значком закрытия с помощью описанных выше техник, а затем добавить значок закрытия самостоятельно.

CSS:

.CloseButton {
background: url('../icons/close-button.png');   
width:15px;
height:15px;
border: 0px solid white;
top:0;
right:0;
position:absolute;
cursor: pointer;
z-index:999;
}

HTML:

var closeDiv = document.createElement("div");
closeDiv.className = "CloseButton";

// добавляем этот div в div, содержащий ваш контент

JS:

 $(closeDiv).click(function () {
         $("yourDialogContent").dialog('close');
     });
Иаков
источник
-1

перейдите к вашему jquery-ui.js (в моем случае jquery-ui-1.10.3.custom.js) и найдите this._createTitlebar (); и прокомментируй это.

теперь любой ваш диалог появится с заголовками. Если вы хотите настроить заголовок, просто перейдите к _createTitlebar (); и отредактируйте код внутри.

по

user2575051
источник
Подобные изменения вызывают ужасную боль при обновлении.
USR