$(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>
需要准备的材料分别有:电脑、浏览器、html编辑器。
1、首先,打开html编辑器,新建html文件,例如:index.html,输入问题基础代码。
2、在index.html中的<body>标签中,输入js代码:
function fun() {
alert('click success!')
}
3、浏览器运行index.html页面,此时点击按钮弹出了提示框。
弹出提示框一般有3种
1)alert (普通提示框)
2)prompt (可输入的提示框)
3)confirm (可选择的提示框)
下面举个例子:
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<button onclick="mal()">第一种:alert</button>
<button onclick="mpro()">第二种:prompt</button>
<button onclick="mcon()">第三种:confirm</button>
<script>
function mal(){
alert('这是一个普通的提示框')
}
function mpro(){
var val = prompt('这是一个可输入的提示框','这个参数为输入框默认值,可以不填哦')
//prompt会把输入框的值返回给你
}
function mcon(){
var boo = confirm('这是一个可选择的提示框,3种提示方式,学会了吗?')
//confirm 会返回你选择的选项,然后可以依据选择执行逻辑
if(boo){
alert('学会了,真聪明')
}else{
alert('再来一遍吧')
}
}
</script>
</body>
</html>