js自定义弹出框、对话框、提示框、弹窗总结


一、JS的三种最常见的对话框

//====================== JS最常用三种弹出对话框 ========================
 
    //弹出对话框并输出一段提示信息
    function ale() {
        //弹出一个对话框
        alert("提示信息!");
 
    }
 
    //弹出一个询问框,有确定和取消按钮
    function firm() {
        //利用对话框返回的值 (true 或者 false)
        if (confirm("你确定提交吗?")) {
            alert("点击了确定");
        }
        else {
            alert("点击了取消");
        }
 
    }
 
    //弹出一个输入框,输入一段文字,可以提交
    function prom() {
        var name = prompt("请输入您的名字", ""); //将输入的内容赋给变量 name ,
 
        //这里需要注意的是,prompt有两个参数,前面是提示的话,后面是当对话框出来后,在对话框里的默认值
        if (name)//如果返回的有内容
        {
            alert("欢迎您:" + name)
        }
 
    }

二、点击按钮时常用的6中提示框和操作
<!-----------按钮提示框---------->
<input type="button" name="btn2" id="btn2" value="删除" οnclick="return confirm('Yes/No'););
<!-----------按钮提示框----------> 
<input type="button" name="btn2" id="btn2" value="提示" οnclick="javaScript:alert('您确定要删除吗?');
<!-----------提交按钮----------> 
<input type="button" value="提交" οnclick="javaScript:window.location.href='http://www.baidu.com';"/>
 
<!-----------关闭按钮----------> 
<input type="button" value="关闭" οnclick="javaScript:window.close();">
 
<!-----------返回并关闭连接----------> 
<a href="#" οnclick="javascript:;window.opener.location.reload();window.close()">返回</a>
javaScript:window.location.reload();//返回当前页并刷新
 
<!-----------返回上一级页面----------> 
<input type="button" name="button" value="< 返回" οnclick="javascript:history.go(-1)"/>

三、弹出独立窗口
//关闭,父窗口弹出对话框,子窗

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
### 回答1: 要在微信小程序中弹出提示框,可以使用微信提供的`wx.showModal`方法。示例代码如下: ```javascript wx.showModal({ title: '提示', content: '这是一个弹窗提示框', success(res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } }) ``` 在`showModal`方法中,可以设置弹窗的标题、内容等。当用户点击确定或取消按钮时,会触发`success`回调函数,可以在其中处理用户的选择。 ### 回答2: 微信小程序提供了弹窗提示框的功能,开发者可以使用该功能在小程序中实现弹窗效果。 通过调用wx.showToast()函数可以实现简单的弹窗提示框。该函数接受一个对象作为参数,其中可以设置的属性包括title(提示的文字内容)、icon(提示图标,默认为success,可选的值还有loading)、duration(提示的持续时间,默认为1500毫秒)等。调用该函数后,小程序会在界面上显示一个带有指定内容和图标的弹窗,并在指定时间后自动消失。 示例代码如下: wx.showToast({ title: '操作成功', icon: 'success', duration: 2000 }) 除了基本的弹窗提示框外,小程序还提供了更多的弹窗样式和功能。如wx.showModal()函数用于显示模态对话框,其中可以设置的属性包括title对话框标题)、content(对话框内容)、confirmText(确认按钮文字,默认为“确定”)、cancelText(取消按钮文字,默认为“取消”)等。调用该函数后,小程序会在界面上显示一个带有指定内容和按钮的对话框,用户需要点击确认或取消按钮才能关闭对话框。 示例代码如下: wx.showModal({ title: '提示', content: '确定要删除该条记录吗?', confirmText: '确定', cancelText: '取消', success: function (res) { if (res.confirm) { console.log('用户点击确定') } else if (res.cancel) { console.log('用户点击取消') } } }) 通过使用这些弹窗提示框的功能,开发者可以方便地向用户展示信息或获取用户的确认操作,提升小程序的用户体验。 ### 回答3: 微信小程序弹窗提示框是一种在小程序中用于给用户展示信息的对话框组件。通过弹窗提示框,开发者可以向用户显示重要的提示、警告或者成功的信息。 弹窗提示框提供了丰富的样式和功能选项来满足开发者的需求。开发者可以自定义弹窗的标题、内容、按钮文字等,以及指定弹窗的样式、位置和动画效果。此外,开发者还可以设置弹窗的触发方式,比如点击按钮、页面加载完成等等。 在使用微信小程序弹窗提示框时,开发者需要调用相应的API接口来触发弹窗,并传入相关的参数来设置弹窗的内容和样式。例如,可以使用wx.showToast()来显示一个包含文本内容的弹窗提示框,或者使用wx.showModal()来显示一个带有确定和取消按钮的弹窗提示框弹窗提示框在用户体验中扮演着重要的角色。通过合理的使用弹窗提示框,开发者可以向用户提供及时的反馈和指导,帮助用户完成操作或者警示用户注意事项。同时,开发者也需要注意,不要滥用弹窗提示框,以免造成用户的困扰和打扰。 总之,微信小程序弹窗提示框为开发者提供了一种方便、灵活且易用的方式来向用户展示信息。开发者可以根据自己的需求和用户反馈,合理运用弹窗提示框,提升小程序的用户体验和功能完整性。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值