封装弹窗并模拟confirm方法

最新推荐文章于 2023-09-05 14:54:14 发布
最新推荐文章于 2023-09-05 14:54:14 发布
阅读量1.4k 收藏 2
点赞数
分类专栏： 工作网页特效日常积累 文章标签： layer 模拟confirm js 特效
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Mr_YanYan/article/details/80258504
版权

代码如下

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .cancel,
        .confirm {
            cursor: pointer;
            width: 40%;
            outline: none;
            border: 0px;
            text-align: center;
            background: white;
            color: blue;
            border: 1px solid lightseagreen;
        }

        .cancel {
            margin-right: 10%;
        }

        .confirm {
            margin-left: 10%;
        }
    </style>
</head>

<body>
    <button>弹出中间弹框</button>
</body>
<script>
    var oButton = document.getElementsByTagName("button")[0];
    oButton.onclick = function () {
        new layer(
            { layerCertain: true, position: 'left', top: '200px', left: '350px' }, function () {
                alert('点击了确认')
            }, function () {
                alert('点击了取消')
            });
    }
    function layer(styleChange, funOne, funTwo) {
        this.funOne = funOne||null;
        this.funTwo = funTwo||null;
        this.style = {
            title: '系统提示',
            content: '这是默认的提示',
            position: 'center',
            layerCertain: false,
        }
        if (styleChange != 'undefined') {
            this.forChangeStyle(styleChange);
        }
        this.init();
    }
    layer.prototype = {
        init() {
            this.createDiv();
            if (this.style.layerCertain) {
                this.layerCertain();
            }
            this.closeLayer();
            this.layerConfirm(this.funOne);
            this.layerCancel(this.funTwo);
        },
        createDiv() {
            var iframe = document.createElement('div');
            var style = document.createElement("style");
            var classStyle = '';
            if (this.style.position == 'center') {
                classStyle = '.layerPosition{position:fixed;z-index:11;background:lightpink;display:inline-block;height:105px;width:200px;top:0;left:0;bottom:0;right:0;margin:auto';
            }
            else if (this.style.position == 'left') {
                classStyle = '.layerPosition{position:fixed;z-index:11;background:lightpink;display:inline-block;height:105px;width:200px;top:' + this.style.top + ';left:' + this.style.left + '';
            }
            iframe.className = 'layerPosition';
            style.appendChild(document.createTextNode(classStyle));
            var head = document.getElementsByTagName("head")[0];
            head.appendChild(style);
            iframe.innerHTML = '<h3>' + this.style.title + '<p style="color:red;cursor:pointer;margin:0;float:right"id="closeLayer">XXX</p></h3><div>' + this.style.content + '</div><div><button class="cancel">取消</button><button class="confirm">确定</button>';
            document.body.appendChild(iframe);
        },
        layerCertain() {
            var oCertain = document.createElement('div');
            var style = document.createElement("style");
            var classStyle = '';
            classStyle = '.layerCertain{position:fixed;z-index:1;top:0;left:0;bottom:0;right:0;background:rgba(0,0,0,0.4)}';
            style.appendChild(document.createTextNode(classStyle));
            var head = document.getElementsByTagName("head")[0];
            head.appendChild(style);
            oCertain.className = 'layerCertain';
            document.body.appendChild(oCertain);
        },
        closeLayer() {
            this.addHandler(document.getElementById('closeLayer'), 'click', function () {
                var certain = document.getElementsByClassName('layerCertain')[0] || null,
                    layerPanel = document.getElementsByClassName('layerPosition')[0];
                if (certain) {
                    certain.parentElement.removeChild(certain);
                }
                layerPanel.parentElement.removeChild(layerPanel);
            });
        },
        //这个是回调的重点
        layerConfirm(funOne) {
            var _this = this;
            this.addHandler(document.getElementsByClassName('confirm')[0], 'click', function () {
                if (funOne && typeof funOne == 'function') {
                    funOne();
                }
                var certain = document.getElementsByClassName('layerCertain')[0] || null,
                    layerPanel = document.getElementsByClassName('layerPosition')[0];
                if (certain) {
                    certain.parentElement.removeChild(certain);
                }
                layerPanel.parentElement.removeChild(layerPanel);
            })
        },
        //这个是回调的重点
        layerCancel(funTwo){
            var _this = this;
            this.addHandler(document.getElementsByClassName('cancel')[0],'click',function(){
                if(funTwo&&typeof funTwo == 'function'){
                    funTwo();
                }
                var certain = document.getElementsByClassName('layerCertain')[0] || null,
                    layerPanel = document.getElementsByClassName('layerPosition')[0];
                if (certain) {
                    certain.parentElement.removeChild(certain);
                }
                layerPanel.parentElement.removeChild(layerPanel);
            })
        },
        addHandler(obj, type, fun) {
            obj.addEventListener ? obj.addEventListener(type, fun) : obj['on' + type] = fun;
        },
        forChangeStyle(styleChange) {
            for (var key in styleChange) {
                this.style[key] = styleChange[key];
            }
        }

    }
</script>

</html>

效果图如下

这里写图片描述

如有更好的解决方法，欢迎提出~~

乐橙Web
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
js模拟Confirm、alert弹框,可以修改文字颜色。
07-19
可以直接调用，操作方便，调用代码如下： jConfirm('Can you confirm this，<span am red.?', 'Confirmation Dialog', function(r) { });
js模拟confirm
07-11
模拟实现confirm的阻塞。代码里面有注解，如果还不懂加QQ:fdgyxf@163.com
antd modal 拖动_AntD Modal.confirm 确认弹出框用法
weixin_36140683的博客
02-15 2216
this.showDeleteConfirm(record.id)}>删除//按钮的oClick事件调用此函数showDeleteConfirm = (id) => {Modal.confirm({title: ‘确认删除此项目吗?‘,icon: ,content: ‘‘,okText: ‘是‘,okType: ‘danger‘,cancelText: ‘否‘,onOk: () =&...
模拟confirm窗口
vinep的专栏
12-05 1373
昨天做有个需求，要confirm窗口默认选中取消。不知道有什么简单的方法，就模拟了一个。说实话现在真不想做这些锁碎的事情，无奈。。。基本思路就是利用showModalDialog打开模拟的页面，在页面里点击“确定”，“取消”按钮返回不同的值。然后在父页面中判断返回值。代码没有整理，直接贴出来做个参考。模拟页面confirm.htmhtml>  head>  
封装alert弹窗样式
weixin_41377877的博客
10-24 780
开发过程中，有些样式也是要注重美观的，对此，我们可以对一些基层方法做一些样式处理，是效果看起来更加的符合整体样式。 function alertInfo(message){     layer.alert(message, {         skin: 'layui-layer-lan'         ,closeBtn: 0       }); } 如图：  ...
js封装弹框
sxww_zyt的博客
02-13 519
弹框分标题区、内容区、操作区三部分，主要包含标题、关闭按钮、展示内容、确定/取消事件。对于没有出入的配置项，使用默认值。
jquery封装的漂亮弹窗confirm
06-21
"jquery封装的漂亮弹窗confirm"是一个利用jQuery实现的对话框插件，它为开发者提供了一个美观且功能丰富的确认对话框替代原生JavaScript的`confirm()`函数。这个组件的主要目标是增强用户体验，同时保持代码的简洁和...
改变layer confirm弹窗按钮的颜色方法
10-16
在标题为“改变layer confirm弹窗按钮的颜色方法”的文章中，作者提供了一种简单有效的方法来修改确认对话框中按钮的颜色。 首先，我们先来看一下原始的确认弹窗样式，它的按钮颜色通常是Layer库默认设定的。这个...
vue封装可复用组件confirm,并绑定在vue原型上的示例
10-16
本示例中，我们将探讨如何封装一个名为`confirm`的确认对话框组件，并将其绑定到Vue的原型上，以便在整个应用中方便地调用。 首先，我们创建两个文件：`confirm.vue`和`confirm.js`。`confirm.vue`负责定义组件的...
在vue中封装的弹窗组件使用队列模式实现方法
10-15
// 打开弹窗并执行相关逻辑 }; // 假设这是某个触发弹窗的事件 const triggerEvent = () => { pushDialog({ type: 'confirm', message: '是否确定操作？', onConfirm: () => { // 处理确认操作 }, }); }; `...
一款alert,confirm美化插件(内含使用教程)
12-28
这是一个美化版的alert和confirm弹出框插件，适用于IE7+、chrome、Edge、fireFox、Safari等绝大多数浏览器。 功能可自己拓展，这里只是一个基础版本的插件 ，能够取代系统自带的alert和confirm。
JQuery DIV 实现window.confirm美化确认提示框
11-29
JQuery DIV 实现window.confirm美化确认提示框
react中的 Modal.confirm
lzfengquan的博客
08-30 5156
/** * 点击审核拒绝 * @param rowKeys 选择行的keys * @param rows 选择的行 * @returns */ handleApproveRefused = async (rowKeys, rows) => { // 接收选中行的参数，进行判断 if (rows.some(val => val.state !== 'DRAFT')) { return ElNotification({ ty.
js 三种弹窗 alert、confirm和prompt
孤独的冥王星
12-05 1622
alert：警告 经常用作程序调试时弹出结果。在弹出后点击&amp;quot;确定&amp;quot;按钮之前，不能进行任何其它操作，所以可以把想要在点击“确定”按钮之后执行的语句写到后面就可以了，并没有对“确定”按钮有监听事件 function toast(){ alert(&amp;quot;警告&amp;quot;); console.log(&amp;quot;点了确定&amp;quot;); } 当点确定以后才
【Antd+vue】antd Modal.confirm实现延迟关闭效果（点击确定，等待请求完成再关闭弹窗）
热门推荐
Emily's Blog
07-24 1万+
antd Modal.confirm实现延迟关闭效果业务场景分析代码--拿来即用 Ant Design的Modal组件在业务中十分常用。当需要一个简洁的确认框询问用户时，可以使用 Modal.confirm() 等语法糖方法。今天用大白话来讲讲如何用promise来延迟关闭确认对话框（Modal.confirm）。 业务场景 当开发删除、退出等功能时，我们常常会使用Modal.confirm()来实现。希望用户点击确定按钮后，请求相应的接口，请求成功后再关闭该弹窗。 效果图展示（在文章的最后会附上代码）：
弹窗组件封装： 原生js封装toast 、二次封装element $confirm
落花生
12-11 856
/** * 自定义toast弹窗 * @param {*} value * @param {*} type text\fail\success 默认不传使用 text * @param {*} duration 持续时间 */ static _toast (value,type,duration=3000){ // 唯一id标识 let uniqueIds = 'poemTast_' + parseInt(Math.random() * 1000)...
利用bootstrap的modal组件自定义alert，confirm和modal对话框
weixin_34168700的博客
03-01 495
  由于浏览器提供的alert和confirm框体验不好，而且浏览器没有提供一个标准的以对话框的形式显示自定义HTML的弹框函数，所以很多项目都会自定义对话框组件。本篇文章介绍自己在项目中基于bootstrap的modal组件，自定义alert，confirm和modal对话框的经验，相对比较简单实用，希望能对你有所参考价值。（代码下载） 1. 实例展示 详细的代码可通过前面给出的下载链接下...
基于BootStrap modal模态框 类浏览器Window对象的alert confirm prompt框实现
chuangxin的专栏
02-23 2303
基于BootStrap modal组件实现的一个类似window对象alert框、confirm框和prompt框，涉及函数定义字符串获取、立即调用函数表达式、正则表达式运用，modal组件框调用等知识点。
react中使用Modal.confirm数据不更新的问题解决
最新发布
见贤思齐焉，见不贤内自省
09-05 1893
react中使用Modal.confirm数据不更新的问题解决
vue关闭弹窗this.$confirm
08-29
要关闭Vue中的弹窗，可以使用以下代码： ...这样就可以通过调用 `this.$confirm.close()` 方法来关闭弹窗了。请注意，具体关闭弹窗的方法可能会因使用的弹窗插件而有所不同，上述示例仅适用于某些常见的UI库。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值