[jquery] jquery UI 대화 상자 : 제목 표시 줄없이 초기화하는 방법은 무엇입니까?

가장 좋은 해결책은 옵션을 사용하는 것입니다. dialogClass 입니다.

jquery UI 문서에서 추출한 내용 :

초기화 중 : $('.selector').dialog({ dialogClass: 'noTitleStuff' });

또는 init 후 원하는 경우. :

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

그래서 나는 dialogClass = ‘noTitleStuff’옵션과 CSS를 사용하여 대화 상자를 만들었습니다.

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

너무 간단합니다! 하지만 왜 이전 id-> class 드릴링 방법이 작동하지 않는지 생각하기 위해 하루가 걸렸습니다. 실제로 .dialog()메소드 div 를 호출 하면 변환 한 다른 div (실제 대화 상자 div)의 자식이 될 수 있으며 div의 ‘형제’가 될 수 titlebar있으므로 전자에서 시작하여 후자를 찾는 것은 매우 어렵습니다.

답변

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

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

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

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

$("#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();

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

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

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