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

제목 표시 줄없이 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'클래스가있는 모든 요소가 제거됩니다.

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 이벤트 를 사용 하고 제목 표시 줄을 숨기는 것이 더 효율적이고 읽기 쉽습니다 . 페이지 전역 클래스 이름 검색을 사용하는 것을 좋아하지 않습니다.

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

단순한.

대화 상자를 초기화 할 때 dialogClass를 사용한 후 jquery를 사용하여 제목 표시 줄을 숨길 수 있습니다.

초기화 중 :

$('.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를 사용하고 jquery를 통해 CSS를 추가하고 설정하여 극복 할 수 있습니다

여기에 대한 구문이 있습니다

$(".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)로 이동하여 this._createTitlebar ();를 검색하십시오. 의견을 말하십시오.

이제 대화 상자의 모든 사람이 머리글과 함께 나타납니다. 헤더를 사용자 정의하려면 _createTitlebar ()로 이동하십시오. 내부 코드를 편집하십시오.

으로