CSS를 사용하여 jQuery UI 대화 상자에서 닫기 버튼을 제거하는 방법은 무엇입니까?

HTML 웹 페이지에서 데이터를 정렬된 순서로 표시하는 것은 지루한 작업입니다. 대화 상자는 웹 페이지에서 표시 가능한 형태로 정보를 표시하는 데 사용됩니다. 대화 상자는 제목과 내용을 포함하는 부동 창입니다. jQuery UI를 사용하면 개발자는 웹 사이트용 간단하고 사용자 친화적인 대화 상자를 만들 수 있습니다. 이 기사에서는 jQuery UI 대화 상자를 만드는 방법과 이 상자에서 닫기 버튼을 제거하는 방법에 대해 설명합니다.

먼저 jQuery UI 대화 상자를 이해해 봅시다.

jQuery UI 대화상자

jQuery Dialog() 메서드를 사용하면 개발자는 페이지 콘텐츠의 영향을 받지 않는 간단한 대화 상자 창을 뷰포트에 만들 수 있습니다. dialog() method는 모든 HTML 요소가 대화 상자 형태로 표시될 수 있음을 브라우저에 알리는 데 사용됩니다. 제목 표시줄과 콘텐츠 공간으로 구성됩니다. 기본적으로 닫기 버튼(x)을 통해 이동, 크기 조정, 삭제가 가능합니다.

문법

으아악

매개변수

• Title− 개발자가 대화 상자에 표시되는 제목을 결정할 수 있습니다.

• Width- 개발자가 대화 상자의 너비를 결정할 수 있습니다.

• Position- 개발자가 대화 상자의 초기 위치를 결정할 수 있습니다.

• Height- 개발자가 대화 상자의 높이를 결정할 수 있습니다.

• Button - 대화 상자에 버튼을 추가하는 데 사용됩니다.

• Max-height - 대화 상자의 최대 높이를 결정합니다

• Max-width - 대화 상자의 최대 너비를 결정합니다

• Min-height - 대화 상자의 최소 높이를 결정합니다

• Min-width - 대화 상자의 최소 너비를 결정합니다

• Appendto - 이 옵션을 false로 설정하면 UIdraggable 클래스가 HTML DOM 요소 목록에 추가되는 것을 방지할 수 있습니다.

• 자동 열기 - 이 옵션을 true로 두면 대화 상자가 생성되자마자 열립니다. false인 경우 호출 시 대화 상자가 열립니다.

따라야 할 단계

JQuery 대화 상자를 만들기 위해 따라야 할 단계는 다음과 같습니다.

1단계 - <script> 태그 내부의 코드에 jQuery 및 jQuery UI CDN을 추가합니다. 대신 로컬 시스템에 다운로드할 수 있습니다. </script>

으아악

2단계 - 대화 상자가 될 HTML 요소(예: div, p 등)를 만들고 해당 ID를 설정합니다. 이제 jQuery UIdialog() 메서드를 사용하여 대화 상자를 만듭니다.

3단계 - 클릭하면 대화 상자가 표시되는 버튼을 만듭니다. <script> 태그 내부를 클릭하면 대화 상자가 열리는 함수를 작성하세요. 버튼을 클릭하면 대화 상자가 열리도록 <b><i>autoopen: false를 설정합니다. </script>

4단계 - CSS를 사용하여 버튼과 대화 상자의 스타일을 지정합니다.

예

다음 예제에서는 간단한 jQuery UI 대화 상자를 만드는 방법을 보여줍니다.

으아악

보시다시피 기본적으로 대화상자에는 닫기 버튼이 표시됩니다. 다음으로 닫기 버튼을 제거하려면 CSS를 사용하겠습니다.

jQuery UI 대화상자에서 닫기 버튼 제거

jQuery UI 대화 상자에서 닫기 버튼 을 제거하려면 ui-dialog-titlebar-close의 표시 속성 값을 none으로 설정하기만 하면 됩니다.

문법

으아악

따라야 할 단계

다음 단계를 따르세요

1단계 - <script> 태그 내부의 코드에 jQuery 및 jQuery UI CDN을 추가합니다. 대신 로컬 시스템에 다운로드할 수 있습니다. </script>

으아악

2단계 - 대화 상자가 될 HTML 요소(예: div, p 등)를 만들고 해당 ID를 설정합니다. 이제 jQuery UIdialog() 메서드를 사용하여 대화 상자를 만듭니다.

3단계 - 클릭하면 대화 상자가 표시되는 버튼을 만듭니다. <script> 태그 내부를 클릭하면 대화 상자가 열리는 함수를 작성하세요. </script>

4단계 - CSS를 사용하여 버튼과 대화 상자의 스타일을 지정합니다. 클래스 선택기 ".ui-dialogtitlebar-close"를 사용하고 표시 속성을 없음으로 설정하세요.

예

다음 예에서는 jQuery UI 대화 상자에서 닫기 버튼을 제거하는 방법을 보여줍니다.

으아악

결론

대화 상자는 사용자 상호 작용을 용이하게 하는 작은 그래픽 창입니다. 이를 통해 개발자는 사용자와 소통하고 응답을 받을 수 있습니다. 이러한 대화 상자를 만드는 방법에는 여러 가지가 있습니다. 이 기사에서는 jQuery UI를 사용하여 대화 상자를 만듭니다. 또한 jQuery UI 대화 상자에서 닫기 버튼(기본적으로 표시됨)을 제거하는 방법도 논의했습니다.

위 내용은 CSS를 사용하여 jQuery UI 대화 상자에서 닫기 버튼을 제거하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!