jquery SweetAlert 플러그인은 반응형 프롬프트 box_javascript 기술을 구현합니다.

jquery 팝업 레이어 플러그인은 메시지 프롬프트, 오류 프롬프트, 확인 상자 프롬프트 등을 지원합니다. 대화형 경험이 매우 좋습니다. 모두가 WeChat Pay, Alipay 등을 사용하여 사용자 경험을 완성합니다. 이 플러그인은 최소한 IE9를 지원해야 합니다. 사용법도 매우 간단하고 투박하며 널리 사용되는 jquery 플러그인 사용 방법과 일치합니다.

먼저 효과를 보여드리겠습니다:

온라인 미리보기 소스코드 다운로드

코드는 다음과 같습니다.

<h1>Sweet Alert</h1>
<h2>A beautiful replacement for JavaScript's "Alert"</h2>
<button class="download">Download</button>
<h3>So... What does it do&#63;</h3>
<p>Here's a comparison of a standard error message. The first one uses the built-in <strong>alert</strong>-function, while the second is using <strong>sweetAlert</strong>.</p>
<div class="showcase normal">
<h4>Normal alert</h4>
<button>Show error message</button>
<h5>Code:</h5>
<pre class="brush:php;toolbar:false"><span class="attr">alert</span>(<span class="str">"Oops... Something went wrong!"</span>);
 

Sweet Alert

Show error message

Code:

<span class="attr">sweetAlert</span>(<span class="str">"Oops..."</span>, <span class="str">"Something went wrong!"</span>, <span class="str">"error"</span>);

Pretty cool huh? SweetAlert automatically centers itself on the page and looks great no matter if you're using a desktop computer, mobile or tablet. It's even highly customizeable, as you can see below!

More examples

In these examples, we're using the shorthand function swal to call sweetAlert.

• A basic message

  Try me!

  <span class="attr">swal</span>(<span class="str">"Here's a message!"</span>)

• A title with a text under

  Try me!

  <span class="attr">swal</span>(<span class="str">"Here's a message!"</span>, <span class="str">"It's pretty, isn't it&#63;"</span>)

• A success message!

  Try me!

  <span class="attr">swal</span>(<span class="str">"Good job!"</span>, <span class="str">"You clicked the button!"</span>, <span class="str">"success"</span>)

• A warning message, with a function attached to the "Confirm"-button...

  Try me!