Rumah > hujung hadapan web > tutorial js > pemalam jquery SweetAlert melaksanakan kemahiran box_javascript gesaan responsif

pemalam jquery SweetAlert melaksanakan kemahiran box_javascript gesaan responsif

WBOY
Lepaskan: 2016-05-16 15:44:33
asal
1453 orang telah melayarinya

pemalam lapisan pop timbul jquery menyokong gesaan mesej, gesaan ralat, gesaan kotak pengesahan, dsb. Pengalaman interaktif sangat bagus Semua orang menggunakan WeChat Pay, Alipay, dll. untuk melengkapkan pengalaman pengguna. Pemalam ini mesti menyokong sekurang-kurangnya IE9. Kaedah penggunaan juga sangat mudah dan kasar, yang selaras dengan kaedah penggunaan plug-in jquery yang popular.

Biar saya tunjukkan kesannya dahulu:

Pratonton dalam talian Muat turun kod sumber

Kod adalah seperti berikut:

<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

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

    <span class="attr">swal</span>(<span class="str">"Here's a message!"</span>)
  • A title with a text under

    <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!

    <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...

    Salin selepas log masuk

Di atas ialah penjelasan terperinci tentang cara pemalam SweetAlert jquery melaksanakan kotak gesaan responsif melalui kod.

Label berkaitan:
sumber:php.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Cadangan popular
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan