Artikel ini adalah artikel cermin dari terjemahan mesin, silakan klik di sini untuk melompat ke artikel aslinya.

Melihat: 20094|Jawab: 2

[HTML/HTML5] Kotak pesan peringatan yang sangat indah SweetAlert

[Salin tautan]
Diposting pada 24/12/2015 12.00.48 | | | |





Sweet Alert adalah efek pengingat indah yang menggantikan Javascrip{filter}t Alert tradisional. SweetAlert secara otomatis memusatkan dan menyejajarkan ke tengah halaman, sehingga terlihat bagus apakah Anda menggunakan komputer desktop, ponsel, atau tablet. Selain itu, tersedia berbagai opsi konfigurasi khusus untuk kontrol yang fleksibel.

Cara menggunakan:

Memperkenalkan:

<scrip{filter}t src="dist/sweetalert.min.js"></scrip{filter}t> <link rel="stylesheet" type="text/css" href="dist/sweetalert.css">
Kemudian, contoh sederhana:

swal({ title: "Error!", text: "Inilah pesan kesalahan saya!", type: "error", confirmButtonText: "Cool" });
Paket file terlampir: sweetalert-master.zip (650.13 KB, Jumlah unduhan: 9, 售价: 2 粒MB)

Argumen
Nilai default

Descrip{filter}tion
Judulnull (wajib)Judul modal. Ini dapat ditambahkan ke objek di bawah kunci "title" atau diteruskan sebagai parameter pertama fungsi.
TeksnolSebuah deskripsi{filter}tion untuk modal. Ini dapat ditambahkan ke objek di bawah kunci "teks" atau diteruskan sebagai parameter kedua dari fungsi.
jenisnolJenis modal. SweetAlert hadir dengan 4 jenis bawaan yang akan menampilkan animasi ikon yang sesuai: "peringatan", "kesalahan", "keberhasilan" dan "info". Anda juga dapat mengaturnya sebagai "masukan" untuk mendapatkan modal segera. Itu dapat dimasukkan ke dalam objek di bawah kunci "jenis" atau diteruskan sebagai parameter ketiga dari fungsi.
allowEscapeKeytrueJika diatur ketrue, pengguna dapat menutup modal dengan menekan tombol Escape.
kustomKelasnolKelas CSS kustom untuk modal. Ini dapat ditambahkan ke objek di bawah kunci "customClass".
allowOutsideClickfalseJika diatur ketrue, pengguna dapat menutup modal dengan mengklik di luarnya.
showCancelButtonfalseJika diatur ketrue, tombol "Batal" akan ditampilkan, yang dapat diklik pengguna untuk menutup modal.
tampilKonfirmasiTomboltrueJika diatur kefalse, tombol "OK/Konfirmasi" akan disembunyikan. Pastikan Anda mengatur timer atau mengatur allowOutsideClick ke true saat menggunakan ini, agar tidak mengganggu pengguna.
konfirmasiTombolTeks"OKE"Gunakan ini untuk mengubah teks pada tombol "Konfirmasi". Jika showCancelButton diatur sebagai true, tombol konfirmasi akan secara otomatis menampilkan "Konfirmasi", bukan "OK".
konfirmasiTombolWarna"#AEDEF4"Gunakan ini untuk mengubah warna latar belakang tombol "Konfirmasi" (harus berupa nilai HEX).
batalTombolTeks"Batalkan"Gunakan ini untuk mengubah teks pada tombol "Batal".
closeOnKonfirmasitrueAtur kefalsejika Anda ingin modal tetap terbuka meskipun pengguna menekan tombol "Konfirmasi". Ini sangat berguna jika fungsi yang dilampirkan ke tombol "Konfirmasi" adalah SweetAlert lain.
closeOnBataltrueSama seperti closeOnConfirm, tetapi untuk tombol batal.
imageUrlnolTambahkan ikon yang disesuaikan untuk modal. Harus berisi string dengan jalur ke gambar.
Ukuran gambar"80x80"Jika imageUrl diatur, Anda dapat menentukan imageSize untuk menjelaskan seberapa besar Anda ingin ikon dalam px. Teruskan string dengan dua nilai yang dipisahkan oleh "x". Nilai pertama adalah lebar, yang kedua adalah tinggi.
pengatur waktunolPengatur waktu tutup otomatis modal. Atur dalam ms (milidetik).
htmlfalseJika diatur ke true, tidak akan lolos dari parameter judul dan teks. (Atur ke false jika Anda khawatir tentang serangan XSS.)
animasitrueJika diatur kefalse, animasi modal akan dinonaktifkan. Kemungkinan nilai (string) :pop(default saat animasi diatur ke true),geser dari atas, geser dari bawah
Tipe masukan"teks"Mengubah jenis bidang input saat menggunakantype: "input"(Ini dapat berguna jika Anda ingin pengguna mengetikkan kata sandi mereka, misalnya).
masukanPlaceholdernolSaat menggunakan jenis input, Anda dapat menentukan placeholder untuk membantu pengguna.
masukanNilainolTentukan nilai teks default yang Anda inginkan untuk ditampilkan input saat menggunakantype: "input"
showLoaderOnKonfirmasifalseAtur ketrueuntuk menonaktifkan tombol dan menunjukkan bahwa ada sesuatu yang sedang dimuat.





Mantan:HTTPS Hal-hal Itu (1) Prinsip HTTPS (Cetak Ulang)
Depan:Captcha halaman ASPX vs. MVC
 Tuan tanah| Diposting pada 25/02/2017 18.36.23 |
Diposting pada 08/12/2017 15.20.55 |
Bingkai pop Layui juga terasa enak digunakan
Sanggahan:
Semua perangkat lunak, materi pemrograman, atau artikel yang diterbitkan oleh Code Farmer Network hanya untuk tujuan pembelajaran dan penelitian; Konten di atas tidak boleh digunakan untuk tujuan komersial atau ilegal, jika tidak, pengguna akan menanggung semua konsekuensi. Informasi di situs ini berasal dari Internet, dan sengketa hak cipta tidak ada hubungannya dengan situs ini. Anda harus sepenuhnya menghapus konten di atas dari komputer Anda dalam waktu 24 jam setelah pengunduhan. Jika Anda menyukai program ini, harap dukung perangkat lunak asli, pembelian pendaftaran, dan dapatkan layanan asli yang lebih baik. Jika ada pelanggaran, silakan hubungi kami melalui email.

Mail To:help@itsvse.com