jquery SweetAlert插件实现响应式提示框_javascript技巧
程序员文章站
2022-05-14 21:33:40
...
jquery弹出层插件,支持消息提示、错误提示、确认框提示等。交互体验度非常好,大家都用微信支付、支付宝等完成用户体验度非常的不错。本插件至少要支持IE9+。使用方式也非常的简单、粗暴,很符合大众的jquery插件使用方法。
先给大家演示效果:
代码如下:
Sweet Alert
A beautiful replacement for JavaScript's "Alert"
So... What does it do?
Here's a comparison of a standard error message. The first one uses the built-in alert-function, while the second is using sweetAlert.
Normal alert
Code:
alert("Oops... Something went wrong!");Sweet Alert
Code:
sweetAlert("Oops...", "Something went wrong!", "error");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 title with a text under
swal("Here's a message!", "It's pretty, isn't it?")
-
A success message!
swal("Good job!", "You clicked the button!", "success")
-
A warning message, with a function attached to the "Confirm"-button...
以上就是本文通过代码给大家详解jquery SweetAlert插件实现响应式提示框,希望对大家有所帮助。
上一篇: 利用php绘制饼状图的实现代码
下一篇: 判断48小时内的俩个时间段是否重叠
推荐阅读
-
属于你的jQuery提示框(Tip)插件_javascript技巧
-
jquery SweetAlert插件实现响应式提示框_javascript技巧
-
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效_jquery
-
jquery SweetAlert插件实现响应式提示框_javascript技巧
-
jQuery插件bxSlider实现响应式焦点图_jquery
-
使用jquery实现HTML5响应式导航菜单教程_html5教程技巧
-
jQuery 表单验证插件formValidation实现个性化错误提示_javascript技巧
-
jQuery插件slick实现响应式移动端幻灯片图片切换特效_jquery
-
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效_jquery
-
javascript实现tab响应式切换特效_javascript技巧