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

<p>можно ли открыть диалоговое окно jquery ui без строки заголовка?</p>

<p>я нашел решение для динамического удаления строки заголовка.</p><pre><code>$("#example").dialog(dialogopts); // remove the title bar $(".ui-dialog-titlebar").hide(); </code></pre><p>это удалит все элементы с классом 'ui-dialog-titlebar' после отображения диалогового окна.</p>

<p>я думаю, что лучшим решением является использование опции <code>dialogclass</code>.</p><p>выдержка из документов jquery ui:</p><p>во время инициализации: <code>$('.selector').dialog({ dialogclass: 'notitlestuff' });или если вы хотите после init. : $('.selector').dialog('option', 'dialogclass', 'notitlestuff'); </code></pre><p>итак, я создал диалог с опцией dialogclass = 'notitlestuff' и css вот так:</p><pre><code>.notitlestuff .ui-dialog-titlebar {display:none} </code></pre><p>слишком просто !! но я потратил 1 день, чтобы подумать, почему мой предыдущий метод сверления id-> class не работал. фактически, когда вы вызываете метод <code>.dialog()</code>, преобразуемый вами div становится потомком другого div (реального диалогового div) и, возможно, «братом» div <code>titlebar</code>, поэтому очень трудно попытаться найти последний, начиная с первого.</p>

<p>я считаю, что вы можете скрыть это с помощью css: </p><pre class="lang-css prettyprint-override"><code>.ui-dialog-titlebar { display: none; } </code></pre><p>кроме того, вы можете применить это к определенным диалогам с параметром <code>dialogclass</code>:</p><pre class="lang-js prettyprint-override"><code>$( "#createuserdialog" ).dialog({ dialogclass: "no-titlebar" }); <pre class="lang-css prettyprint-override">.no-titlebar .ui-dialog-titlebar { display: none; } проверьте " <a href="http://api.jqueryui.com/dialog/#theming">theming " диалог. приведенное выше предложение использует опцию dialogclass, которая, по-видимому, включена <a href="http://bugs.jqueryui.com/ticket/12161">это выход в пользу нового метода.

я использую это в своих проектах$("#mydialog").dialog(dialogopts); // remove the title bar $("#mydialog").siblings('div.ui-dialog-titlebar').remove(); // one liner $("#mydialog").dialog(dialogopts).siblings('.ui-dialog-titlebar').remove(); </code></pre>

<p>это сработало для меня:</p><pre><code>$("#dialog").dialog({ create: function (event, ui) { $(".ui-widget-header").hide(); }, </code></pre>

<p>попробуйте использовать</p><pre><code>$("#mydialog").closest(".ui-dialog-titlebar").hide(); это скроет все заголовки диалогов$(".ui-dialog-titlebar").hide(); </code></pre>

<p>на самом деле есть еще один способ сделать это, используя диалог <code>widget</code> напрямую:</p><p>вы можете получить виджет диалога таким образом </p><pre><code>$("#example").dialog(dialogopts); $dlgwidget = $('#example').dialog('widget'); а затем сделать$dlgwidget.find(".ui-dialog-titlebar").hide(); </code></pre><p>скрыть <code>titlebar</code> только в этом диалоге</p><p>и в одной строке кода (мне нравится цепочка):</p><pre><code>$('#example').dialog('widget').find(".ui-dialog-titlebar").hide(); не нужно добавлять дополнительный класс в диалог таким образом, просто перейдите к нему напрямую. работа хорошо для меня.

я считаю более эффективным и более читабельным использование события open и скрытие строки заголовка оттуда. мне не нравится использовать поиск имени класса по всему миру.open: function() { $(this).closest(".ui-dialog").find(".ui-dialog-titlebar:first").hide(); } </code></pre><p>просто.</p>

<p>вы можете использовать jquery, чтобы скрыть заголовок заголовка после использования dialogclass при инициализации диалога.</p><p>во время инициализации:</p><pre><code>$('.selector').dialog({ dialogclass: 'yourclassname' }); $('.yourclassname div.ui-dialog-titlebar').hide(); </code></pre><p>используя этот метод, вам не нужно менять файл css, и это тоже динамично.</p>

<p>мне нравится переопределение виджетов jquery. </p><pre><code>(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 }); </code></pre>

<p>если у вас есть несколько диалогов, вы можете использовать это:</p><pre><code>$("#the_dialog").dialog({ open: function(event, ui) { //hide titlebar. $(this).parent().children('.ui-dialog-titlebar').hide(); } }); </code></pre>

<p>это самый простой способ сделать это, и он удалит заголовок только в этом конкретном диалоге;</p><pre><code>$('.dialog_selector').find('.ui-dialog-titlebar').hide(); 

одна вещь, которую я обнаружил, скрывая заголовок dialog, - это то, что, даже если display отсутствует, программы чтения с экрана все равно поднимают его и будут читать. если вы уже добавили свою собственную строку заголовка, она будет читать оба, вызывая путаницу. то, что я сделал, было удалено из dom с помощью $(selector).remove()</code>. теперь программы чтения с экрана (и все остальные) не увидят его, потому что он больше не существует.</p>

<p>попробуй это</p><pre><code>$("#ui-dialog-title-divid").parent().hide(); заменить divid на соответствующую id

это помогло мне скрыть строку заголовка диалогового окна: $(".ui-dialog-titlebar" ).css("display", "none" ); </code></pre>

<p>вот как это можно сделать.</p><p>перейдите в папку с темами -> base -> open jquery.ui.dialog.css </p><p>найти </p><p>подписок </p><p>если вы не хотите отображать titlebar, просто установите display: none, как я сделал в следующем. </p><pre><code>.ui dialog.ui-dialog .ui-dialog-titlebar { padding: .4em 1em; position: relative; display:none; } </code></pre><p>самиларлы за титул тоже.</p><pre><code>.ui-dialog .ui-dialog-title { float: left; margin: .1em 0; white-space: nowrap; width: 90%; overflow: hidden; text-overflow: ellipsis; display:none; } </code></pre><p>теперь приходит кнопка закрытия, вы также можете установить его нет или вы можете установить его</p><pre><code>.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; } </code></pre><p>я провел много поисков, но ничего, тогда у меня возникла эта идея .. однако это повлияет на то, что у всего приложения не будет кнопки закрытия, строки заголовка для диалога, но вы также можете преодолеть это, используя jquery, добавляя и установка css через jquery</p><p>вот синтаксис для этого </p><pre><code>$(".specificclass").css({display:normal}) 

я думаю, что самый чистый способ сделать это - создать новый виджет mydialog, состоящий из диалогового виджета без кода заголовка. удалять штрих-код заголовка выглядит просто.  <a href="https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js">https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js 

я все еще хотел использовать изменяемые углы, просто не хотел видеть диагональные линии. я использовал$(".ui-resizable-handle").css("opacity","0"); </code></pre><p>просто понял, что я комментирую не тот вопрос. дожить до моего тезки :(</p>

<p>эта следующая форма устранила мне проблему.</p><p><div class="snippet" data-lang="js" data-hide="false"> <div class="snippet-code"> <pre class="snippet-code-js lang-js prettyprint-override"><code>$('#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' }); } }); });</code></pre> <pre class="snippet-code-css lang-css prettyprint-override"><code>#basicmodal { display: none; }</code></pre> <pre class="snippet-code-html lang-html prettyprint-override"><code><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></code></pre> </div> </div> </p>