确认框confirm

最新推荐文章于 2021-10-19 15:06:20 发布
最新推荐文章于 2021-10-19 15:06:20 发布
阅读量1.6k 收藏 1
点赞数
分类专栏： JS
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/NN_nan/article/details/72834252
版权

一、原生弹框

页面添加确认框

if(confirm("你确定删除吗？")) {
    alert("点击了确定")
} else {
    alert("点击了取消")
}

手机移动端确认框confirm去掉网址

window.confirm = function (message) {
    var iframe = document.createElement("IFRAME");
    iframe.style.display = "none";
    iframe.setAttribute("src", 'data:text/plain,');
    document.documentElement.appendChild(iframe);
    var alertFrame = window.frames[0];
    var result = alertFrame.window.confirm(message);
    iframe.parentNode.removeChild(iframe);
    return result;
};

二、自定义弹框

<script type="text/javascript" src="http://files.cnblogs.com/files/eyeear/iTips.min.js"></script>

贴上完整的js代码

/**
 * LBS iTips (仿iPhone界面版) 
 * Date: 2015-10-25 
 * ====================================================================
 * 1. 宽高自适应(maxWidth:300 minWidth:250)  引入iTips.css iTips.js （建议js css 放在同一目录）
 * ====================================================================
 * 2. 调用方式1: 
    Tips.alert(option) //显示(确定)按钮 
    Tips.confirm(option) //显示(确定 取消)按钮  option.after(boolean) boolean布尔值 确定true 取消false
    Tips.open(option) //无显示按钮 可设置定时关闭 默认不自动关闭需手动关闭
    Tips.close() //手动调用关闭 (方式1/方式2都可以调用)
    * Tips.show(text) // 显示加载提示框 text为弹出文本 默认加载中 
     * Tips.hide() // 隐藏加载提示框
 * ====================================================================
 * 3. 调用方式2:
     Tips.alert(content,fn) //content内容 fn弹出框关闭后执行函数 相当于option.after
     Tips.confirm(content,fn) //fn(boolean) boolean布尔值 确定true 取消false
     Tips.open(content, time) //time自动关闭时间(单位秒) 默认不自动关闭需手动关闭 
 * ====================================================================
 * 4. option选项：
     content：内容(可带html标签自定义样式)
     before: 点击确定按钮 关闭弹出框前 执行函数  (Tips.alert Tips.confirm中有效)
             如果函数返回false 则不会执行(关闭弹出框)和(after) 一般用于做一些检测
     after: 点击确定按钮 关闭弹出框后 执行函数 (Tips.alert Tips.confirm中有效)
     time: 自动关闭时间(单位秒) time 秒后关闭 (Tips.open中有效) 
     define: 定义确定按钮的文本 (Tips.alert Tips.confirm中有效)
     cancel: 定义取消按钮的文本 (Tips.confirm中有效)
 * ====================================================================
 * Tips.BG //遮罩层
 * Tips.Box //弹出框
 * Tips.define //确定按钮
 * Tips.cancel //取消按钮 
 * ====================================================================
**/
;(function() {
    window.Tips = {
        _create: function() {
            if (!this.Box) {
                var body = document.getElementsByTagName('body')[0],
                    html = '<div id="tips_content"></div><div id="tips_foot"><a href="javascript:;" id="tips_cancel">取消</a><a href="javascript:;" id="tips_define">确定</a></div>';
                this.BG = document.createElement('div');
                this.BG.id = 'tips_mask';
                this.Box = document.createElement('div');
                this.Box.id = 'tips_box';
                this.Box.innerHTML = html;
                body.appendChild(this.BG);
                body.appendChild(this.Box);
                this.content = this.$('#tips_content');
                this.foot = this.$('#tips_foot');
                this.define = this.$('#tips_define');
                this.cancel = this.$('#tips_cancel');
            }
        },
        minWidth: 250,
        maxWidth: 300,
        _show: function() {
            this._fix = true;
            this.BG.style.display = 'block';
            this.Box.style.display = 'block';
            this._css();
            this._bind();
        },
        _hide: function() {
            this._fix = false;
            this.BG.style.display = 'none';
            this.Box.style.display = 'none';
            this._unbind();
        },
        _pos: function() {
            var d = document,
                doc = d.documentElement,
                body = d.body;
            this.pH = doc.scrollHeight || body.scrollHeight;
            this.sY = doc.scrollTop || body.scrollTop;
            this.wW = doc.clientWidth;
            this.wH = doc.clientHeight;
            if (document.compatMode != "CSS1Compat") {
                this.pH = body.scrollHeight;
                this.sY = body.scrollTop;
                this.wW = body.clientWidth;
                this.wH = body.clientHeight;
            }
        },
        _css: function() {
            this._pos();
            this.BG.style.height = Math.max(this.pH, this.wH) + 'px';
            this.Box.style.width = 'auto';
            this.content.style.cssText = 'float:left';
            var cW = this.content.offsetWidth;
            this.content.style.cssText = '';
            // width max:300 min:200
            if (cW < this.minWidth) cW = this.minWidth;
            if (cW > this.maxWidth) {
                cW = this.maxWidth;
                // this.content.style.whiteSpace = '';
                this.content.style.whiteSpace = 'normal';
            }
            this.Box.style.width = cW + 'px';
            // absolute
            // this.Box.style.left = (this.wW - cW) / 2 + 'px';
            // this.Box.style.top = this.sY + (this.wH - this.Box.offsetHeight) / 2 + 'px';
            // fixed 1
            // this.Box.style.marginLeft = -(cW / 2) + 'px';
            // this.Box.style.marginTop = -(this.Box.offsetHeight / 2) + 'px';
            // fixed 2
            this.Box.style.marginLeft = -(cW / 2) + 'px';
            this.Box.style.top = (this.wH - this.Box.offsetHeight) / 2 + 'px';
        },
        _fixSize: function() {
            var _this = this,
                time = +new Date();
            this._timeid && clearInterval(this._timeid);
            this._timeid = setInterval(function() {
                if (+new Date() - time > 1000) {
                    clearInterval(_this._timeid);
                    _this._timeid = null;
                    return false;
                }
                _this._css();
            }, 250);
        },
        _define: function(option) {
            var _this = this;
            this.define.onclick = function(e) {
                e.stopPropagation();
                if (typeof option === 'function') {
                    _this._hide();
                    _this.Bool = true;
                    option && option(_this.Bool);
                    return;
                }
                var before = option.before && option.before();
                var bool = false;
                before === false && (bool = true);
                if (bool) {
                    e.stopPropagation();
                    return false;
                }
                _this._hide();
                _this.Bool = true;
                option.after && option.after(_this.Bool);
            };
        },
        _cancel: function(option) {
            var _this = this;
            this.cancel.onclick = function(e) {
                e.stopPropagation();
                _this._hide();
                _this.Bool = false;
                if (typeof option === 'function') {
                    option && option(_this.Bool);
                    return;
                }
                option.after && option.after(_this.Bool);
            };
        },
        _bind: function() {
            this.Box.focus();
            this._setEvent();
        },
        _unbind: function() {
            this.Box.blur();
            this.define.onclick = null;
            this.cancel.onclick = null;
            this.define.innerText = '确定';
            this.cancel.innerText = '取消';
            this._timer && clearTimeout(this._timer);
            this._timer = null;
            this._timeid && clearInterval(this._timeid);
            this._timeid = null;
        },
        _setEvent: function() {
            var _this = this;
            this.on(this.BG, 'touchmove', function(e) {
                e.preventDefault();
            });
            this.on(this.Box, 'touchmove', function(e) {
                e.preventDefault();
            });
            this.on(this.define, 'touchstart', function(e) {
                _this.define.className.indexOf('tips_hover') < 0 && (_this.define.className += ' tips_hover');
            });
            this.on(this.define, 'touchend', function(e) {
                _this.define.className = _this.define.className.replace('tips_hover', '').trim();
            });
            this.on(this.cancel, 'touchstart', function(e) {
                _this.cancel.className.indexOf('tips_hover') < 0 && (_this.cancel.className += ' tips_hover');
            });
            this.on(this.cancel, 'touchend', function(e) {
                _this.cancel.className = _this.cancel.className.replace('tips_hover', '').trim();
            });
            this.on(window, 'resize', function(e) {
                if (!_this._fix) return;
                _this._fixSize();
            });
        },
        _setBtn: function(n, option) {
            this.foot.style.display = 'block';
            this.define.style.display = '';
            this.cancel.style.display = '';
            switch (parseInt(n)) {
                case 1:
                    this.define.className = 'tips_define';
                    this.cancel.style.display = 'none';
                    if (typeof option === 'function') {
                        this.define.innerText = '确定';
                        this._define(function() {
                            option && option();
                        });
                    } else {
                        this.define.innerText = option.define || '确定';
                        this._define(option);
                    }
                    break;
                case 2:
                    this.define.className = '';
                    if (typeof option === 'function') {
                        this.define.innerText = '确定';
                        this.cancel.innerText = '取消';
                        this._define(function(b) {
                            option && option(b);
                        });
                        this._cancel(function(b) {
                            option && option(b);
                        });
                    } else {
                        this.define.innerText = option.define || '确定';
                        this.cancel.innerText = option.cancel || '取消';
                        this._define(option);
                        this._cancel(option);
                    }
                    break;
                case 0:
                    this.foot.style.display = 'none';
                    this.define.style.display = 'none';
                    this.cancel.style.display = 'none';
                    break;
            }
        },
        _setContent: function(html) {
            this.content.innerHTML = html+'';
        },
        _setOption: function(option, n, fn) {
            var content = '';
            this._create();
            if (typeof option === 'string' || typeof option === 'number') {
                content = option || '';
                this._setBtn(n, function(b) {
                    fn && fn(b);
                });
            } else {
                option = option || {},
                    content = option.content || '';
                this._setBtn(n, option);
            }
            this._setContent(content);
            this._show();
        },
        _setTime: function(option, t) {
            var time = 0,
                _this = this;
            time = (typeof option === 'string' ? t : option.time);
            if (parseInt(time) > 0) {
                this._timer = setTimeout(function() {
                    _this._hide();
                }, time * 1000);
            }
        },
        on: function(el, type, handler) {
            el.addEventListener(type, handler, false);
        },
        off: function(el, type, handler) {
            el.removeEventListener(type, handler, false);
        },
        $: function(s) {
            return document.querySelector(s);
        },
        alert: function(option, fn) {
            this._setOption(option, 1, fn);
        },
        confirm: function(option, fn) {
            this._setOption(option, 2, function(b) {
                fn && fn(b);
            });
        },
        open: function(option, t) {
            this._setOption(option, 0);
            this._setTime(option, t);
        },
        close: function() {
            this._hide();
        }
    };
}());

css代码

#tips_mask, #tips_box *{margin:0;padding:0; -webkit-tap-highlight-color: rgba(0,0,0,0); color: #333; }

/* absolute */
/*
#tips_mask{display:none;position:absolute;top:0;left:0;z-index:99999;width:100%;height: 100%; background-color:rgba(0,0,0,.3);}
#tips_box{display:none;position:absolute; z-index:100000; background:#FFF; font-family: Helvetica,arial,sans-serif; border-radius:10px; animation: bounceIn 0.2s both; -webkit-animation: bounceIn 0.2s both;}
*/

/* fixed 1*/
/*
#tips_mask{display:none;position:fixed;top:0;left:0;z-index:99999;width:100%;height: 100%; background-color:rgba(0,0,0,.3);}
#tips_box{display:none;position:fixed; left: 50%; top:50%; z-index:100000; background:#FFF; font-family: Helvetica,arial,sans-serif; border-radius:10px; animation: bounceIn 0.2s both; -webkit-animation: bounceIn 0.2s both;}
*/

/* fixed 2*/
#tips_mask{display:none;position:fixed;top:0;left:0;z-index:99999;width:100%;height: 100%; background-color:rgba(0,0,0,.5);}
#tips_box{display:none;position:fixed; left: 50%; top:0; z-index:100000; background:#FFF; font-family: Helvetica,arial,sans-serif; border-radius:10px; animation: bounceIn 0.2s both; -webkit-animation: bounceIn 0.2s both;}

#tips_content{padding:25px 20px; text-align:center; overflow: hidden; font-size:16px; line-height:1.5; white-space: nowrap; /* 不换行 */  border-radius:10px 10px 0 0;  }
#tips_foot{position:relative; overflow: hidden; height:48px; font-size: 0; line-height:48px; text-align:center; border-top:1px solid #EBEBEB; border-radius:0 0 10px 10px;}
#tips_foot a{position:relative; display:inline-block; width:50%; text-align:center; font-size:18px; text-decoration: none; outline: none; color: #0FA5F5; }
#tips_foot a:first-child{border-radius:0 0 0 10px; }
#tips_foot a:last-child{ border-radius:0 0 10px 0; }
#tips_foot a.tips_define{ width: 100%; background: #FFF; border-radius:0 0 10px 10px;}
#tips_foot a.tips_hover{ background: #e8e8e8; }
#tips_foot:before{content:'';position:absolute; width:1px; height:48px; margin-left: -1px; left:50%; top:0; background:#EBEBEB;}
@-webkit-keyframes bounceIn{
    0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}
    100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
@keyframes bounceIn{
    0%{opacity:0;-webkit-transform:scale(.5);transform:scale(.5)}
    100%{opacity:1;-webkit-transform:scale(1);transform:scale(1)}
}
<script src="/static/jquery/iTips.min.js"></script>
<link href="/static/jquery/tips.css" rel="stylesheet">

使用demo

Tips.confirm({
    content: '<p>你确定删除吗？</p>',
    define: '确定',
    cancel: '取消',
    after: function(b){
        console.log("触发了after")
        if(b){
            console.log("点击了确定")
            Tips.show('正在处理中'); // 开启加载框
            // 在此可以发送ajax请求
            // 模拟ajax
            setTimeout(function(){
               Tips.hide(); // ajax请求成功后 关闭加载框
               // ajax请求成功后 弹出其他消息
               Tips.alert('<p>恭喜您，评分成功</p>',function(){location.reload(true);});
            },1000);
        }else {
            console.log("点击了取消")
        }
    }
});
紫冰Nan
关注
专栏目录
全局定制elementui的确认框confirm
robinspada的博客
12-02 2959
全局定制elementui的确认框confirm，实现键盘控制按钮的焦点。
js模拟confirm
07-11
模拟实现confirm的阻塞。代码里面有注解，如果还不懂加QQ:fdgyxf@163.com
jQuery自定义简单清爽的confirm确认对话框效果
02-27
jQuery自定义简单清爽的confirm确认对话框效果
确认框,confirm工具封装
anyu0190的博客
03-01 202
用bootstrap封装了个确认框工具 效果如下 代码如下: /** * 以模态窗做确认框的函数,title为标题栏内容,body为消息体,yesFun为点击确认按钮后执行的函数,执行后会执行关闭并删除该模态窗的函数 * 该模态窗只有模态窗 * @param:title:提示标题 * @param:body:提示内容 * @param:yes...
confirm确认对话框 弹出确定 提交 取消
热门推荐
丿火凤燎原的博客
12-07 2万+
confirm 消息对话框通常用于允许用户做选择的动作，如：“你对吗？”等。弹出对话框(包括一个确定按钮和一个取消按钮)。 语法: confirm(str); 参数说明: str：在消息对话框中要显示的文本返回值: Boolean值 返回值: 当用户点击"确定"按钮时，返回true 当用户点击"取消"按钮时，返回false 注: 通过返回值可以判断用户点击了什么按钮   ...
JS确认框
东天里的冬天
07-17 1191
本文主要介绍js确认框的几种种使用方法 一. function del() { var msg = "您真的确定要删除吗？\n\n请确认！"; return true; }else{ return false; } } 二. 删除 三. 先执行confirm再跳转
confirm 确认框的使用
weixin_45932157的博客
02-19 4475
如果您希望用户验证或接受某个东西，则通常使用“确认”框。 当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。 如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。 代码： var r = confirm(“请按按钮”); if (r == true) { x = “您按了确认！”; } else { x = “您按了取消！”; } 效果： ...
js确认框confirm()用法实例详解.docx
01-21
confirm() 函数的参数是确认框的提示语，可以是任何字符串，例如："您真的确定要删除吗？"、"确定要删除吗？" 等。 confirm() 函数的多种使用方法 ----------------------------- confirm() 函数可以在多种场景下...
js确认框confirm()用法实例详解
10-23
JavaScript中的`confirm()`函数是一个内置的弹窗函数，用于创建一个带有“确定”和“取消”按钮的对话框，通常用于用户确认操作。本文将详细介绍`confirm()`的三种常见用法，并通过实例进行解析。 ### 第一种方法 ...
jQuery 确认提示框（Confirm）
05-07
内容索引:脚本资源,jQuery,提示框,Confirm　jQuery Confirm确认提示框，不能拖动哦，代替Javascript的Confirm确认提示框，更符合WEB体验标准，比较简洁，自带示例，点击"YES"或“NO”后指向的网址是不一样的。
确认框confirm的使用
07-23
### 确认框confirm的使用 在网页开发过程中，JavaScript提供了一系列的内置函数来帮助开发者与用户进行交互，其中`confirm()`函数就是一个非常实用的功能。通过`confirm()`，可以在网页上弹出一个对话框，询问用户...
自定义 confirm 确认框
weixin_34090643的博客
08-29 801
ys_confirmation.css.ys-confirmation{ position:fixed; left:0; right:0; top:0; bottom:0; display:none; background-color:rgba(0,0,0,0.4); z-index:99999; } .ys...
javascript（18）——confirm确认框
木子 旭的博客
02-26 413
1.代码 2.代码讲解 触发该handleDelete函数会弹出一个确认框，点击确认则运行大括号内的函数，点击取消则不触发事件。 3.运行结果
简单的弹出确认框
m0_45480496的博客
10-19 870
效果图 1）弹出框用antd里的Modal组件 <Modal title="创建角色" visible={isShowAdd} onOk={this.addRole} onCancel={() => { this.setState({ isShowAdd: false }); }} > <AddForm setForm={fo
自定义确定框（confirm）
weixin_33913332的博客
04-16 372
1、先引入confirm.css @charset "UTF-8"; lq-alert { width: 100%; height: 100%; background: rgba(0, 0, 0, .35); position: fixed; top: 0; left: 0; display: flex; ...
警示框、确认框、输入框
weixin_44549313的博客
02-19 1594
在网页制作中我们会用到一些对话框与客户进行互动。 在HTML中互动框也分为几种，有警示框、确认框、提示框。 直接上代码： 注：括号中的内用如果是字符形，要加”  ”括起来。 警示框效果图： 警示框，作用是提醒用户，中有确认按钮。   确认框效果图： 确认框，有确认和取消两个按钮组成，再次提醒用户是否真的要执行。     这就可以防止用户不小心按错。     给...
弹出是否框！confirm()
aas5002的专栏
04-02 144
Code functiontest() { if(confirm("Areyousure？")) { alert("OK"); } else { alert("NotOK"); } } ...
确认框confirm，提示框prompt
weixin_30385925的博客
04-08 214
<!DOCTYPE html><html><head><meta charset="UTF-8"><title></title></head><body> <script> function show_confirm(){ var r=confirm("你是男生吗？"); if(r=...
MUI框架confirm
最新发布
04-17
MUI框架是一款基于HTML、CSS和JavaScript的前端框架，用于开发移动端应用。它提供了丰富的UI组件和交互效果，可以帮助开发者快速构建出漂亮、流畅的移动应用界面。 其中，confirm是MUI框架中的一个对话框组件，用于显示一个确认对话框给用户。当需要用户确认某个操作时，可以使用confirm组件来弹出一个对话框，让用户选择是或否。 使用confirm组件非常简单，只需要调用mui.confirm()方法，并传入相应的参数即可。参数包括对话框的标题、内容和按钮文字等。当用户点击确认或取消按钮时，可以通过回调函数来处理相应的逻辑。 例如，以下是使用MUI框架confirm组件的示例代码： ``` mui.confirm('确定要删除该条记录吗？', '提示', ['取消', '确定'], function(e) { if (e.index === 1) { // 用户点击了确定按钮 // 执行删除操作 } else { // 用户点击了取消按钮 // 取消删除操作 } }); ``` 以上代码会弹出一个对话框，显示提示信息"确定要删除该条记录吗？"，并提供"取消"和"确定"两个按钮供用户选择。当用户点击确定按钮时，执行删除操作；当用户点击取消按钮时，取消删除操作。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值