手机移动端美化弹窗提示确认框js特效代码

JavaScript023

手机移动端美化弹窗提示确认框js特效代码,第1张

<script type="text/javascript">

$(function(){

  $('#demo1').on('click', function(){

webToast("恭喜您,修改成功恭喜您,修改成功恭喜您修改成功恭喜您","middle",3000)

  })

  $('#demo2').on('click', function(){

popTipShow.alert('弹窗标题','自定义弹窗内容,居左对齐显示,告知需要确认的信息等', ['知道了'],

function(e){

  //callback 处理按钮事件  

  var button = $(e.target).attr('class')

  if(button == 'ok'){

//按下确定按钮执行的操作

//todo ....

this.hide()

  }

}

)

  })

  $('#demo3').on('click', function(){

popTipShow.confirm('弹窗标题','自定义弹窗内容,居左对齐显示,告知需要确认的信息等',['确 定','取 消'],

function(e){

  //callback 处理按钮事件

  var button = $(e.target).attr('class')

  if(button == 'ok'){

//按下确定按钮执行的操作

//todo ....

this.hide()

setTimeout(function() {

webToast("操作成功","top", 2000)

}, 300)

  }

  if(button == 'cancel') {

//按下取消按钮执行的操作

//todo ....

this.hide()

setTimeout(function() {

webToast("您选择“取消”了","bottom", 2000)

}, 300)

  }

}

)

  })

  $('#demo4').on('click', function(){

var html = "<label>姓名:<input class='confirm_input' placeholder='请输入'></label>"

popTipShow.confirm('弹窗标题',html,['确 定','取 消'],

function(e){

  //callback 处理按钮事件

  var button = $(e.target).attr('class')

  if(button == 'ok'){

if(null==$(".confirm_input").val() || ""==$(".confirm_input").val()){

webToast("姓名不能为空!","bottom", 3000)

return

}

this.hide()

setTimeout(function() {

webToast($(".confirm_input").val(),"bottom", 3000)

}, 300)

//按下确定按钮执行的操作

//todo ....

  }

  if(button == 'cancel') {

//按下取消按钮执行的操作

//todo ....

this.hide()

setTimeout(function() {

webToast("您选择“取消”了","top", 2000)

}, 300)

  }

}

)

  })

})

</script>

前端js插件,具有简单使用,交互效果好,具有吸引力外观的特点,下面总结一下最常用并且最好用的js插件:

1.zDialog.js插件。是一个包含各种弹窗的前端插件。

2.ace.min.js插件,ace-element.min.js插件,是基于Bootstrap Ace模板的菜单和包含Tab页效果。

3.jquery.flot.js插件,Jquery的图表插件float。Flot是一个Jquery下图表插件,具有简单使用,交互效果,具有吸引力外观特点。目前支持 Internet Explorer 6+, Chrome, Firefox 2+, Safari 3+ and Opera 9.5+ 等浏览器,是一个基于Javascript和Jquery纯客端户的脚本库。

4.jquery.easypiechart.js插件,主要是用来统计新的访问、跳出率、服务器负载、使用的RAM等,功能很强大,带有HTML5的动画效果,效果非常炫。

query.sparkline.js插件,是一款jquery的画小图插件。

5.jquery.slimscroll.js插件 ,是jQuery内的内容滚动插件,可以定义高度、宽度,还可以定义位置、滚动条大小、尺寸、颜色以及众多参数自定义。

6.jquery.ui.touch.js 插件,包含jQuery触摸效果。

这是一个叫photoswipe的插件,挺好用的,平滑滑动,上一张下一张,点击放大等功能

这是我自己精简了一下的.里面有Demo,你自己看吧.