이 글은 기계 번역의 미러 문서이며, 원본 기사로 바로 이동하려면 여기를 클릭해 주세요.

보기: 20094|회답: 2

[HTML/HTML5] 아주 아름다운 알림 메시지 박스 SweetAlert

[링크 복사]
게시됨 2015. 12. 24. 오후 12:00:48 | | | |





Sweet Alert는 전통적인 Javascrip{filter}t Alert를 대체하는 아름다운 리마인드 효과입니다. SweetAlert는 자동으로 페이지 중앙에 정렬되어 데스크탑, 휴대폰, 태블릿 등 어떤 기기를 사용하든 보기 좋습니다. 또한, 유연한 제어를 위한 다양한 맞춤형 구성 옵션도 제공됩니다.

사용 방법:

소개:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
그럼 간단한 예시를 들어보겠습니다:

swal({ 제목: "Error!", 텍스트: "여기 내 오류 메시지입니다!", type: "error", confirmButtonText: "Cool" });
첨부된 파일 패키지: sweetalert-master.zip (650.13 KB, 다운로드 횟수: 9, 售价: 2 粒MB)

논쟁
기본 값

Descrip{filter}tion
제목null (필수)모달의 제목입니다. 이 함수는 "title" 키로 객체에 추가하거나 함수의 첫 번째 매개변수로 전달될 수 있습니다.
문자 메시지모달에 대한 descrip{filter}tion. 이 함수는 키인 "텍스트" 아래에 객체에 추가하거나 함수의 두 번째 매개변수로 전달될 수 있습니다.
모달의 종류. SweetAlert는 4가지 내장 타입을 제공하며, 이에 대응하는 아이콘 애니메이션을 보여줍니다: "경고", "오류", "성공" 그리고 "정보". 또한 "로 설정할 수도 있습니다입력"prompt 모드 받기 위해서. 이 함수는 객체 키의 "타입" 아래에 넣거나 함수의 세 번째 매개변수로 전달될 수 있습니다.
allowEscapeKeytrue만약true사용자는 Escape 키를 눌러 모달을 해제할 수 있습니다.
커스텀클래스모달용 커스텀 CSS 클래스입니다. "customClass" 키로 객체에 추가할 수 있습니다.
allowOutsideClickfalse만약true사용자는 모달 외부를 클릭하여 해제할 수 있습니다.
쇼캔슬버튼false만약true"취소" 버튼이 표시되며, 사용자는 이를 클릭해 모달을 해제할 수 있습니다.
showConfirmButtontrue만약false, "확인/확인" 버튼은 숨겨집니다. 사용자가 불편하지 않도록 타이머를 설정하거나 allowOutsideClick을 true로 설정하는 것이 중요합니다.
확인버튼텍스트"알았어"이 도구를 사용해 "확인" 버튼의 텍스트를 변경하세요. showCancelButton이 true로 설정되어 있으면, 확인 버튼은 자동으로 "확인"이 아니라 "확인"으로 표시됩니다.
confirmButtonColor"#AEDEF4"이 기능을 사용해 "확인" 버튼의 배경색을 변경하세요(반드시 HEX 값이어야 합니다).
취소버튼텍스트"취소"이걸 사용해서 "취소" 버튼의 텍스트를 바꿔보세요.
닫기확인true다음false사용자가 "확인" 버튼을 눌러도 모달이 계속 열려 있길 원한다면, 특히 "확인" 버튼에 연결된 기능이 또 다른 SweetAlert일 때 유용합니다.
닫기취소truecloseOnConfirm과 같지만 취소 버튼에 해당합니다.
imageUrl모달에 맞춤형 아이콘을 추가하세요. 이미지로 가는 경로가 있는 문자열을 포함해야 합니다.
imageSize"80x80"imageUrl이 설정되어 있다면, imageSize를 지정해 아이콘이 px에서 얼마나 될지 설명할 수 있습니다. "x"로 구분된 두 값의 문자열을 입력합니다. 첫 번째 값은 너비, 두 번째는 높이입니다.
타이머모달의 자동 종료 타이머. 밀리초 단위로 설정됩니다.
HTMLfalsetrue로 설정하면 제목과 텍스트 매개변수를 벗어나지 않습니다. (XSS 공격이 걱정된다면 false로 설정하세요.)
애니메이션true만약false, 모달의 애니메이션은 비활성화됩니다. 가능한 (문자열) 값 :(애니메이션이 true로 설정되면 기본값),위에서 슬라이드-, 아래에서 미끄러지기
inputType"문자"입력 필드 유형을 변경할 때type: "input"(예를 들어 사용자가 비밀번호를 입력하도록 하고 싶을 때 유용할 수 있습니다.)
inputPlaceholder입력 유형을 사용할 때는 사용자가 쉽게 사용할 수 있도록 자리 표시자를 지정할 수 있습니다.
입력값입력이 사용할 때 보여줄 기본 텍스트 값을 지정하세요type: "input"
showLoaderOnConfirmfalse다음true버튼을 비활성화하고 무언가가 로드되고 있음을 보여주기 위해서입니다.





이전의:HTTPS 그 것들 (1) HTTPS 원칙 (재인쇄)
다음:ASPX 대 MVC 페이지 캡차
 집주인| 게시됨 2017. 2. 25. 오후 6:36:23 |
게시됨 2017. 12. 8. 오후 3:20:55 |
라유이의 팝 프레임도 사용감이 좋습니다
면책 조항:
Code Farmer Network에서 발행하는 모든 소프트웨어, 프로그래밍 자료 또는 기사는 학습 및 연구 목적으로만 사용됩니다; 위 내용은 상업적 또는 불법적인 목적으로 사용되지 않으며, 그렇지 않으면 모든 책임이 사용자에게 부담됩니다. 이 사이트의 정보는 인터넷에서 가져온 것이며, 저작권 분쟁은 이 사이트와는 관련이 없습니다. 위 내용은 다운로드 후 24시간 이내에 컴퓨터에서 완전히 삭제해야 합니다. 프로그램이 마음에 드신다면, 진짜 소프트웨어를 지원하고, 등록을 구매하며, 더 나은 진짜 서비스를 받아주세요. 침해가 있을 경우 이메일로 연락해 주시기 바랍니다.

Mail To:help@itsvse.com