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 가지 옵션이 있습니다.
- 예, 제목 표시 줄을 완전히 제거하고 기본 위치를 사용하여 스타일을 지정할 수있는 사용자 정의 항목을 추가하십시오. 절대 위치 지정을 키로 사용해야합니다.
- 시간이 있다면 https://github.com/jquery/jquery-ui/blob/master/ui/jquery.ui.dialog.js#L74 대화 상자의 _create 메소드를 확장 (덮어 쓰지 않고)하면됩니다. 필요한 것
- 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를 사용하여 필요한 스타일을 추가합니다.
