JS消息弹框alert、confirm、prompt的实现代码

alert 消息提示框：

用于警告，只有确定按钮。

alert(str);

confirm 消息对话框：

通过返回值可以判断用户点击了什么按钮 。

confirm(str);

当用户点击"确定"按钮时，返回true。
当用户点击"取消"按钮时，返回false。

prompt()消息输入框：

弹框中包含一个输入框和确认取消按钮，用户可以在输入框输入内容。

var reason = window.prompt(“请输入审核不通过理由：”, “”);

//1. 单纯判断用户是否填写“审核不通过理由”：
if(reason){
//用户填写了理由
}else{
//用户没有填写理由
}

//2. 要区分用户不输入内容点击的是“确定”还是“取消”：
if(reason){
alert(reason);//显示输入内容
//用户填写了内容并且点击的是“确定”
}else if(reason === “”){
//用户没有输入内容点击的“确定”
}else{
//点击的是“取消”
}

补充：js的3大基础弹框

js的3大基础弹框:
    1. 提示框(警告框): alert("内容");
            弹框有一个确定按钮, 无返回值
       示例:alert("弹框内容!")

2. 确认框: confirm("提示内容");
            弹框有2个按钮: 确定/取消
            点击确定返回true, 点击取消返回false
 示例1: confirm("提示内容")
 示例2: <a href="http://www.taobao.com" οnclick="return confirm('逛淘宝吗?')">去淘宝</a>

3. 输入框: prompt(参数);
            参数1: 提示语句. 默认无提示
            参数2: 默认值. 不同的浏览器默认值不一样.
            返回值类型为 字符串
输入框示例:

<script>
    // var str = prompt();
    var str = prompt("请输入姓名", "");
    document.writeln("您输入的是:" + str);
</script>

到此这篇关于JS消息弹框alert、confirm、prompt的文章就介绍到这了,更多相关js消息弹框alert内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • JSP实现页面右下角消息弹框

    JSP实现页面右下角消息弹框

    JSP页面上通过JS实现消息弹出框,样式可根据要求修改,这边只是一个简单的示范例子,自定义了两条消息,弹框效果如下 JSP页面 <%@ page language="java" import="java.util.*" pageEncoding="gb2312"%> <%@page import="java.util.*"%> <html> <head> <style ty

  • JavaScript实现alert弹框效果

    本文实例为大家分享了JavaScript实现alert弹框的具体代码,供大家参考,具体内容如下 因本人水平有限,不足之处还望大家指正. 先上图: 为什么会出现这个需求?浏览器自带的alert不好用吗? 自带的alert在不同的浏览器是有差异的,而且样式也不美观,用户体验度不是很好.所以我们要自己写一个alert弹框,这样我们就可以按照我们自己的需求,把alert弹框做的美观一点. 以下是alert.js代码: var myAlert = { alertbox : function(alertCo

  • js重写alert事件（避免alert弹框标题出现网址）

    js代码: window.alert = function(msg, callback) { var div = document.createElement("div"); div.innerHTML = "<style type=\"text/css\">" + ".nbaMask { position: fixed; z-index: 1000; top: 0; right: 0; left: 0; bottom: 0

  • JS消息弹框alert、confirm、prompt的实现代码

    alert 消息提示框: 用于警告,只有确定按钮. alert(str); confirm 消息对话框: 通过返回值可以判断用户点击了什么按钮 . confirm(str); 当用户点击"确定"按钮时,返回true.当用户点击"取消"按钮时,返回false. prompt()消息输入框: 弹框中包含一个输入框和确认取消按钮,用户可以在输入框输入内容. var reason = window.prompt("请输入审核不通过理由:", "

  • js实现弹框效果

    本文实例为大家分享了js实现弹框效果的具体代码,供大家参考,具体内容如下 js实现弹窗效果 利用display来控制弹窗的现实和隐藏 <!-- 弹出层 --> <div id="popLayer"></div> <!--黑色蒙版 --> <div id="popBox"> <div class="close"> X </div> <div> <!

  • js自定义弹框插件的封装

    js自定义弹框插件的封装

    弹出层提示信息,这是移动前端开发中最常见的需求,你可能会想到一些流行的弹框插件,比如 经典的artDialog 炫酷的Sweetalert等等.. 但是慢慢地你其实会发现通常情况下需求定制化要求较高,一般的弹框插件可能只满足大部分要求,自定义花的时间还不如手动自己封装一个符合自己开发习惯的弹框组件,这样后续开发效率将大大提高. 首先整理一下思路,原生javascript其实是有实现alert()方法的,但是那个会暂时性中断程序运行,并且足以让你丑拒!那么抛开这些细细一想,其实弹框就是两个div层

  • JavaScript中常用的3种弹出提示框(alert、confirm、prompt)

    三种提示框 alert () confirm() prompt () alert () alert()方法是显示一条弹出提示消息和确认按钮的警告框. 需要注意的是 :alert()是一个阻塞的函数,如果我们不点确认按钮,后面的内容就不会加载出来. 使用方式: alert("想要提示的文本内容") 样例代码: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <

  • vue.js前端网页弹框异步行为示例分析

    目录 1. 序 2. 找两个弹框组件看看 3. 自己肝一个 3.1. 封装 Promise 3.2. 确定时允许异步等待 3.3. 细节完善 3.4. 改革 1. 序 网页弹框是个很常见的功能,比如需要告知用户消息的时候 (Alert),需要用户进行确认的时候 (Confirm),需要用户补充一点信息的时候 (Prompt) -- 甚至可以弹框让用户填写表单 (Modal Dialog). 弹框之后,开发者需要知道这个弹框是什么时候关闭以便进行接下来的操作. 在比较古老的 UI 组件中,这个事情

  • 通过vue.extend实现消息提示弹框的方法记录

    通过vue.extend实现消息提示弹框的方法记录

    前提回顾 在项目开发中我们经常使用的组件注册分为两种,一个是全局注册和另一个是局部注册,假设我们的业务场景是用户在浏览注册页面时,点击页面中的注册按钮后,前端根据用户的注册信息先做一次简单的验证,并根据验证弹出一个对应消息提示弹框 我们拿到这个需求后,便开始着手准备要通过局部注册消息弹框组件的方法来实现这个场景,在通过局部注册消息弹框组件的方法解决完这个需求后,自然是沾沾自喜,紧接着又迎来了一个需求,该需求是用户在点击该注册按钮时,点击几次就要出现几次这个消息弹框,你开始犯了难,并思考难道我要在

  • python上selenium的弹框操作实现

    selenium之弹框操作 1,分类 弹框类型自见解分为四种: 1,页面弹框 2,警告提示框(alert) 3,确认消息框(confirm) 4,提示消息对话(prompt) 提示: selenium 提供switch_to_alert()方法定位到 alert/confifirm/prompt对话框. 2,操作 1,页面弹框 页面弹框是属于HTML里面的元素,它是由用户在操作页面的时候在本页面弹出的.所以科研直接在页面上定位到 步骤: 1,用户操作后,弹出页面弹框 2,直接定位弹框元素,进行操

  • android自定义Dialog弹框和背景阴影显示效果

    android自定义Dialog弹框和背景阴影显示效果

    本文实例为大家分享了android自定义Dialog弹框和背景阴影显示的具体代码,供大家参考,具体内容如下 首先需要自定义一个类,继承Dialog import android.app.Dialog; import android.content.Context; import android.os.Bundle; import android.view.View; import android.view.ViewGroup; import android.view.WindowManager;

  • js实现模态框的拖拽效果

    js实现模态框的拖拽效果

    本文实例为大家分享了js实现模态框拖拽效果的具体代码,供大家参考,具体内容如下 之前学习js遇到了这样的需求:鼠标按下后,移动鼠标,模态框随鼠标移动,鼠标松开,模态框也不会随鼠标移动.<完整的代码在最后哦> 分析思路: 1.点击弹出层,模态框和遮挡层就会显示出来.display:block2.点击关闭按钮,模态框和遮挡层就会隐藏.display:none 3.在页面中拖拽的步骤:鼠标按下并移动,之后松开鼠标4.触发事件是鼠标按下mousedown,鼠标移动是mousemove,鼠标松开:mou

随机推荐