原生JS 有3种最常用的弹窗方式
最最最常用的是 alert()
alert 引发的弹窗，只有一个“确定”按钮。
alert( 内容 )
内容可以是变量，可以是字符串。
字符串需要用单引号或者双引号括起来。
需要注意的是，内容如果是 html 标签，是会直接输出字符串的。
如果需要换行，需要用到 html 的转义字符。
alert 无法直接展示 object。
confirm 对比 alert，会多出一个“取消”按钮。
而且 confirm 有一个回调值。
如果点击了“确定”，返回值为：true
如果点击了“取消”，返回值为：false
prompt 的比 confirm 多一个输入框。
同样，prompt 也是有返回值的。
如果按了确定，返回值是 输入的内容，字符串型。
如果按了取消，返回值是：null。
<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>
