javascript - modal - 어떻게 jQuery-Ui 대화 상자 제목 표시 줄을 제거하려면?



jquery popup window (3)

titelbar를 제거하고 스타일 만 사용하여 닫기 아이콘을 유지하려면 아래 스타일을 사용하십시오. 제목 표시 줄을 닫기 아이콘의 크기로 축소하고 숨 깁니다. ui-icons_6e6e6e_256x240.png jqueryui와 함께 제공되는 ui-icons_222222_256x240.png 이미지를 밝게하여 만들어졌습니다.

.ui-dialog .ui-dialog-titlebar.ui-widget-header{background: none; border: none; height: 20px; width: 20px; padding: 0px; position: static; float: right; margin: 0px 2px 0px 0px;}

.ui-dialog-titlebar.ui-widget-header .ui-dialog-title{display: none;}

.ui-dialog-titlebar.ui-widget-header .ui-button{background: none; border: 1px solid #CCCCCC;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close{margin: 0px; position: static;}

.ui-dialog .dialog.ui-dialog-content{padding: 0px 10px 10px 10px;}

.ui-dialog .ui-dialog-titlebar .ui-dialog-titlebar-close .ui-icon{position: relative; margin-top: 0px; margin-left: 0px; top: 0px; left: 0px;}

.ui-dialog .ui-dialog-titlebar .ui-state-default .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_6e6e6e_256x240.png");}

.ui-dialog .ui-dialog-titlebar .ui-state-hover .ui-icon {background-image: url("/css/ui-lightness/images/ui-icons_222222_256x240.png");}

https://src-bin.com

jQuery-UI 대화 상자 의 제목 표시 줄을 숨기려고하지만 제목 표시 줄의 닫기 단추를 계속 표시하려고합니다. 이 같은 stackoverflow에 대한 게시물을 많이 검색했습니다. 각 게시물에서 제목 표시 줄은 숨겨져 있지만 막대가 차지하는 공간은 여전히 ​​있습니다. 그 공간도 없애고 닫기 버튼을 제거하지 않고 싶습니다 .

내가 어떻게 할 수 있니?


Answer #1

내가 보는 방식에는 3 가지 옵션이 있습니다.

  1. 예, 제목 표시 줄을 완전히 제거하고 기본 위치를 사용하여 스타일을 지정할 수있는 사용자 정의 항목을 추가하십시오. 절대 위치 지정을 키로 사용해야합니다.
  2. 시간이 있다면 https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74 대화 상자의 _create 메소드를 확장 (덮어 쓰지 않고)하면됩니다. 필요한 것
  3. CSS hackery로 작업하여 제목 표시 줄을 모든 요소의 높이가 0이지만 닫기 버튼으로 유지합니다.

어느 것이 든 그들의 장단점이있다. 가능한 한 # 2를 권하고 싶다. 여기 위젯을 사용하는 방법에 대한 정보가있다. http://api.jqueryui.com/jQuery.widget/


Answer #2

이 답변을 기반으로 :

.dialog("widget") 옵션을 사용하여 대화 상자의 div 래퍼를 찾습니다. 래퍼에는 헤더, 제목 표시 줄 및 닫기 버튼을 포함하여 대화 상자에 사용 된 모든 마크 업이 포함되어 있습니다. 및 대화 내용 자체. 메소드를 호출하고 제목 표시 줄을 숨기는 한 가지 방법은 다음과 같습니다.

$("#id").dialog({
    autoOpen: false
}).dialog("widget").find(".ui-dialog-title").hide();​

그런 다음 CSS를 사용하여 불필요한 여백, 테두리 및 패딩을 제거 할 수 있습니다. 예 :

.ui-dialog-titlebar {
    float: right;
    border: 0;
    padding: 0;
}
.ui-dialog-titlebar-close {
    top: 0;
    right: 0;
    margin: 0;
    z-index: 999;
}

위 코드를 기반으로 한 데모 입니다. jQuery를 사용하여 필요한 스타일을 추가합니다.





jquery-ui-dialog