비디오: Slick web animations -- Polycasts #23 2024
AJAX를 사용하면 HTML5 및 CSS3 프로그래머가 사용자 정의 대화 상자를 만들 수 있습니다. JavaScript는 몇 가지 대화 상자 (경고 및 프롬프트 대화 상자)를 제공하지만 이는 매우 추악하고 상대적으로 융통성이 없습니다. jQuery UI에는 div를 가상 대화 상자로 변환하는 기술이 포함되어 있습니다. 이 대화 상자는 테마를 따라 가며 크기 조정 및 이동이 가능합니다.
대화 상자를 작성하는 것은 어렵지 않지만 코드를 사용하여 대화 상자를 켜거나 끌 수 있어야합니다. 그렇지 않으면 적절한 대화 상자처럼 작동하지 않습니다 (운영중인 창을 모방 한 것입니다). 시스템):
-
대화 상자로 사용할 div를 만듭니다.
div를 생성하고 ID를 부여하여 대화 상자 노드로 바꿀 수 있습니다. title 속성을 추가하면 제목이 대화 상자의 제목 표시 줄에 나타납니다.
대화 상자 클래스를 사용하면 설치된 페이지 테마와 일치하는 이동 가능한 크기가 큰 사용자 정의 대화 상자를 사용할 수 있습니다.
-
div를 대화 상자로 바꿉니다.
dialog () 메서드를 사용하여 div를 init () 함수의 jQuery 대화 상자 노드로 바꿉니다.
$ ("# dialog"). 대화(); -
기본적으로 대화 상자를 숨 깁니다.
보통 일종의 이벤트가 발생할 때까지 대화 상자를 보이지 않게합니다. 이 특정 예제에서는 사용자가 단추를 클릭 할 때까지 대화 상자를 표시하지 않을 수 있습니다. 대화 상자가 소환 될 때까지 나타나지 않도록 대화 상자를 닫기 위해 init () 함수에서 대화 상자를 닫을 수 있습니다.
-
대화 상자를 닫습니다.
대화 상자를 닫으려면 대화 상자 노드를 참조하고 대화 상자의 dialog () 메소드를 다시 호출하십시오. 이번에는 단일 값 "close"를 매개 변수로 보내면 대화 상자는 즉시 닫힙니다:
// 처음에는 대화 상자 $ ("# dialog")를 닫습니다. 대화 상자 ("닫기"); -
X를 클릭하면 대화 상자가 자동으로 닫힙니다.
대화 상자에는 대부분의 윈도우 시스템에서 창 닫기 아이콘과 비슷한 작은 X가 있습니다. 사용자는이 아이콘을 클릭하여 대화 상자를 닫을 수 있습니다.
-
코드로 대화 상자를 열고 닫을 수 있습니다.
My Open Dialog 및 Close Dialog 버튼은 대화 상자의 동작을 제어하는 함수를 호출합니다. 예를 들어, 다음은 Open Dialog 버튼에 연결된 함수입니다.
function openDialog () {$ ("# dialog"). dialog ("open");} // end openDialog
