Діалогове вікно інтерфейсу jquery: як ініціалізуватись без заголовка?

Чи можливо відкрити діалог інтерфейсу jQuery без рядка заголовка?

Я думаю, що найкраще рішення - використовувати варіант dialogClass.

Витяг із документів інтерфейсу jquery:

під час init: $('.selector').dialog({ dialogClass: 'noTitleStuff' });

або якщо ви хочете після init. :

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

Тож я створив деякий діалог із опцією dialogClass = 'noTitleStuff' та таким css:

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

занадто просто !! але мені знадобився 1 день, щоб подумати, чому мій попередній метод буріння id-> не працював. Насправді, коли ви називаєте .dialog()метод діва, ви перетворюєтесь на дитину іншого діва (справжнього діалогового диві) та, можливо, «брата» titlebarдіва, тому дуже важко спробувати знайти останнього, починаючи з першого.

Я вигадав виправлення для динамічного видалення заголовка.

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

Після видалення діалогового вікна всі елементи за допомогою класу 'ui-dialog-title-панелі' буде видалено.

Я вважаю, ви можете приховати це за допомогою CSS:

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

Крім того, ви можете застосувати це до певних діалогових вікон із dialogClassможливістю:

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

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

Ознайомтеся з діалогом " Тематика ". Вищенаведена пропозиція використовує dialogClassваріант, який, схоже, є на виході на користь нового методу.

Я використовую це у своїх проектах

$("#myDialog").dialog(dialogOpts);
// remove the title bar
$("#myDialog").siblings('div.ui-dialog-titlebar').remove();
// one liner
$("#myDialog").dialog(dialogOpts).siblings('.ui-dialog-titlebar').remove();

Це працювало для мене:

$("#dialog").dialog({
    create: function (event, ui) {
        $(".ui-widget-header").hide();
    },

Спробуйте використовувати

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

Це приховає всі заголовки діалогів

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

Насправді є ще один спосіб зробити це, використовуючи widgetбезпосередньо діалогове вікно :

Ви можете отримати діалог віджетів таким чином

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

а потім робити

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

щоб приховати лише titlebarцей діалог

і в одному рядку коду (мені подобається ланцюжок):

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

Не потрібно додавати додатковий клас до діалогу таким чином, просто перейдіть до нього безпосередньо. Для мене чудово працює.

Мені здається, більш ефективно та читабельніше використовувати відкриту подію та заховати звідти рядок заголовка. Мені не подобається використовувати пошук сторінок у глобальному імені класу.

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

Простий.

Ви можете використовувати jquery, щоб приховати заголовок після використання dialogClass при ініціалізації діалогового вікна.

під час init:

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

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

Використовуючи цей метод, вам не потрібно змінювати файл css, і це теж динамічно.

Мені подобаються переважні віджети 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
});

Якщо у вас є кілька діалогових вікон, ви можете скористатися цим:

$("#the_dialog").dialog({
        open: function(event, ui) { 
            //hide titlebar.
            $(this).parent().children('.ui-dialog-titlebar').hide();
        }
    });

Це найпростіший спосіб зробити це, і він видалить лише заголовок у цьому конкретному діалоговому вікні;

$('.dialog_selector').find('.ui-dialog-titlebar').hide();

Єдине, що я виявив, приховуючи заголовку діалогового вікна, - це те, що навіть якщо дисплей відсутній, читачі екрану все одно підхоплять його і прочитають. Якщо ви вже додали власний рядок заголовка, він буде читати обидва, викликаючи плутанину.

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

Спробуйте це

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

замінити dividвідповіднимиid

Наступна форма вирішила мені проблему.

$('#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>

Я думаю, що найчистішим способом цього було б створити новий віджет myDialog, що складається з діалогового віджета за мінусом коду заголовка. Зрізання заголовкового коду виглядає просто.

https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js

Це допомогло мені приховати рядок заголовка діалогового вікна:

$(".ui-dialog-titlebar" ).css("display", "none" );

Ось як це можна зробити.

Перейдіть до папки тем -> база -> відкрити 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})

Для мене я все ще хотів використовувати кутові кути, просто не хотів так бачити діагональні лінії. я використав

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

Щойно зрозумів, що коментую неправильне запитання. Доживу до мого імені :(

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

Як говориться, ви можете зробити так ...

У CSS:

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

В JS:

$( "#dialog" ).dialog({
  dialogClass: "no-titlebar"
});

Ви можете видалити панель із піктограмою закриття за допомогою описаних вище технологій, а потім самостійно додати піктограму закриття.

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');
     });

перейдіть до свого jquery-ui.js (у моєму випадку jquery-ui-1.10.3.custom.js) та знайдіть це._createTitlebar (); і прокоментуйте це.

тепер будь-хто із вашого діалогового вікна з’явиться із заголовками. Якщо ви хочете налаштувати заголовок, просто перейдіть до _createTitlebar (); і відредагуйте код всередині.

від