[JS]JS模拟Alert弹出框效果--自定义CSS样式

最新推荐文章于 2023-07-08 17:30:29 发布
最新推荐文章于 2023-07-08 17:30:29 发布
阅读量3.8k 收藏
点赞数
分类专栏： HTML 
function alertMsg(msg, mode) { //mode为空，即只有一个确认按钮，mode为1时有确认和取消两个按钮
        msg = msg || '';
        mode = mode || 0;
        var top = document.body.scrollTop || document.documentElement.scrollTop;
        var isIe = (document.all) ? true : false;
        var isIE6 = isIe && !window.XMLHttpRequest;
        var sTop = document.documentElement.scrollTop || document.body.scrollTop;
        var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        var winSize = function(){
            var xScroll, yScroll, windowWidth, windowHeight, pageWidth, pageHeight;
            // innerHeight获取的是可视窗口的高度，IE不支持此属性
            if (window.innerHeight && window.scrollMaxY) {
                xScroll = document.body.scrollWidth;
                yScroll = window.innerHeight + window.scrollMaxY;
            } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
                xScroll = document.body.scrollWidth;
                yScroll = document.body.scrollHeight;
            } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
                xScroll = document.body.offsetWidth;
                yScroll = document.body.offsetHeight;
            }

            if (self.innerHeight) {    // all except Explorer
                windowWidth = self.innerWidth;
                windowHeight = self.innerHeight;
            } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
                windowWidth = document.documentElement.clientWidth;
                windowHeight = document.documentElement.clientHeight;
            } else if (document.body) { // other Explorers
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
            }

            // for small pages with total height less then height of the viewport
            if (yScroll < windowHeight) {
                pageHeight = windowHeight;
            } else {
                pageHeight = yScroll;
            }

            // for small pages with total width less then width of the viewport
            if (xScroll < windowWidth) {
                pageWidth = windowWidth;
            } else {
                pageWidth = xScroll;
            }

            return{
                'pageWidth':pageWidth,
                'pageHeight':pageHeight,
                'windowWidth':windowWidth,
                'windowHeight':windowHeight
            }
        }();
        //alert(winSize.pageWidth);
        //遮罩层
        var styleStr = 'top:0;left:0;position:absolute;z-index:10000;background:#666;width:' + winSize.pageWidth + 'px;height:' +  (winSize.pageHeight + 30) + 'px;';
        styleStr += (isIe) ? "filter:alpha(opacity=80);" : "opacity:0.8;"; //遮罩层DIV
        var shadowDiv = document.createElement('div'); //添加阴影DIV
        shadowDiv.style.cssText = styleStr; //添加样式
        shadowDiv.id = "shadowDiv";
        //如果是IE6则创建IFRAME遮罩SELECT
        if (isIE6) {
            var maskIframe = document.createElement('iframe');
            maskIframe.style.cssText = 'width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;position:absolute;visibility:inherit;z-index:-1;filter:alpha(opacity=0);';
            maskIframe.frameborder = 0;
            maskIframe.src = "about:blank";
            shadowDiv.appendChild(maskIframe);
        }
        document.body.insertBefore(shadowDiv, document.body.firstChild); //遮罩层加入文档
        //弹出框
        var styleStr1 = 'display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 200) + 'px;top:' + (winSize.windowHeight / 2 - 150) + 'px;_top:' + (winSize.windowHeight / 2 + top - 150)+ 'px;'; //弹出框的位置
        var alertBox = document.createElement('div');
        alertBox.id = 'alertMsg';
        alertBox.style.cssText = styleStr1;
        //创建弹出框里面的内容P标签
        var alertMsg_info = document.createElement('P');
        alertMsg_info.id = 'alertMsg_info';
        alertMsg_info.innerHTML = msg;
        alertBox.appendChild(alertMsg_info);
        //创建按钮
        var btn1 = document.createElement('a');
        btn1.id = 'alertMsg_btn1';
        btn1.href = 'javas' + 'cript:void(0)';
        btn1.innerHTML = '<cite>确定</cite>';
        btn1.onclick = function () {
            document.body.removeChild(alertBox);
            document.body.removeChild(shadowDiv);
            return true;
        };
        alertBox.appendChild(btn1);
        if (mode === 1) {
            var btn2 = document.createElement('a');
            btn2.id = 'alertMsg_btn2';
            btn2.href = 'javas' + 'cript:void(0)';
            btn2.innerHTML = '<cite>取消</cite>';
            btn2.onclick = function () {
                document.body.removeChild(alertBox);
                document.body.removeChild(shadowDiv);
                return false;
            };
            alertBox.appendChild(btn2);
        }
        document.body.appendChild(alertBox);

    }


        #alertMsg {
            display: none;
            width: 400px;
            border: 1px solid #ddd;
            border-radius: 5px;
            box-shadow: 1px 1px 10px black;
            padding: 10px;
            font-size: 12px;
            position: absolute;
            text-align: center;
            background: #fff;
            z-index: 100000;
        }

        #alertMsg_info {
            padding: 2px 15px;
            line-height: 1.6em;
            text-align: left;
        }

        #alertMsg_btn1, #alertMsg_btn2 {
            display: inline-block;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAAA1CAMAAACDdXJZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADZQTFRF9vb22dnZ6Ojo4uLi5OTk7Ozs1tbW3t7e5ubm7+/v8PDwh4eHqqqqwsLCpqam+fn56urq9/f3ytDYYwAAABJ0Uk5T//8A4r+/EgAAAJlJREFUeNrs10EKgCAURdFfaZlW1v43m86aa3CRd1dwEMGnndwOOy1TK7gcqVXcjsZRw+M8NeGGxd3UKm6mJtywONe30K0fcP2quIUa/uTQuECt4Dz4bT3A2QNOOOGE++IubsmuaNQKzrBjU7gWHHaVVBx2z+Fx2D+EcC24jRoeN6Fx1IRrwa3UhGvBke+cA6+SBA79b30FGADMK+kbDduXzAAAAABJRU5ErkJggg==) no-repeat left top;
            padding-left: 3px;
            color: #000000;
            font-size: 12px;
            text-decoration: none;
            margin-right: 10px;
            cursor: pointer;
        }

        #alertMsg_btn1 cite, #alertMsg_btn2 cite {
            line-height: 24px;
            display: inline-block;
            padding: 0 13px 0 10px;
            background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAJwAAAA1CAMAAACDdXJZAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAADZQTFRF9vb22dnZ6Ojo4uLi5OTk7Ozs1tbW3t7e5ubm7+/v8PDwh4eHqqqqwsLCpqam+fn56urq9/f3ytDYYwAAABJ0Uk5T//8A4r+/EgAAAJlJREFUeNrs10EKgCAURdFfaZlW1v43m86aa3CRd1dwEMGnndwOOy1TK7gcqVXcjsZRw+M8NeGGxd3UKm6mJtywONe30K0fcP2quIUa/uTQuECt4Dz4bT3A2QNOOOGE++IubsmuaNQKzrBjU7gWHHaVVBx2z+Fx2D+EcC24jRoeN6Fx1IRrwa3UhGvBke+cA6+SBA79b30FGADMK+kbDduXzAAAAABJRU5ErkJggg==) no-repeat right top;
            font-style: normal;
        }


2017年8月14日 03：35更新：

Promise版本：

function alertMsg(msg, mode) { //mode为空，即只有一个确认按钮，mode为1时有确认和取消两个按钮
    return new Promise(function(resolve) {
        msg = msg || '';
        mode = mode || 0;
        var top = document.body.scrollTop || document.documentElement.scrollTop;
        var isIe = (document.all) ? true : false;
        var isIE6 = isIe && !window.XMLHttpRequest;
        var sTop = document.documentElement.scrollTop || document.body.scrollTop;
        var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
        var winSize = function(){
            var xScroll, yScroll, windowWidth, windowHeight, pageWidth, pageHeight;
            // innerHeight获取的是可视窗口的高度，IE不支持此属性
            if (window.innerHeight && window.scrollMaxY) {
                xScroll = document.body.scrollWidth;
                yScroll = window.innerHeight + window.scrollMaxY;
            } else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
                xScroll = document.body.scrollWidth;
                yScroll = document.body.scrollHeight;
            } else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
                xScroll = document.body.offsetWidth;
                yScroll = document.body.offsetHeight;
            }

            if (self.innerHeight) {    // all except Explorer
                windowWidth = self.innerWidth;
                windowHeight = self.innerHeight;
            } else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
                windowWidth = document.documentElement.clientWidth;
                windowHeight = document.documentElement.clientHeight;
            } else if (document.body) { // other Explorers
                windowWidth = document.body.clientWidth;
                windowHeight = document.body.clientHeight;
            }

            // for small pages with total height less then height of the viewport
            if (yScroll < windowHeight) {
                pageHeight = windowHeight;
            } else {
                pageHeight = yScroll;
            }

            // for small pages with total width less then width of the viewport
            if (xScroll < windowWidth) {
                pageWidth = windowWidth;
            } else {
                pageWidth = xScroll;
            }

            return{
                'pageWidth':pageWidth,
                'pageHeight':pageHeight,
                'windowWidth':windowWidth,
                'windowHeight':windowHeight
            }
        }();
        //alert(winSize.pageWidth);
        //遮罩层
        var styleStr = 'top:0;left:0;position:absolute;z-index:10000;background:#666;width:' + winSize.pageWidth + 'px;height:' +  (winSize.pageHeight + 30) + 'px;';
        styleStr += (isIe) ? "filter:alpha(opacity=80);" : "opacity:0.8;"; //遮罩层DIV
        var shadowDiv = document.createElement('div'); //添加阴影DIV
        shadowDiv.style.cssText = styleStr; //添加样式
        shadowDiv.id = "shadowDiv";
        //如果是IE6则创建IFRAME遮罩SELECT
        if (isIE6) {
            var maskIframe = document.createElement('iframe');
            maskIframe.style.cssText = 'width:' + winSize.pageWidth + 'px;height:' + (winSize.pageHeight + 30) + 'px;position:absolute;visibility:inherit;z-index:-1;filter:alpha(opacity=0);';
            maskIframe.frameborder = 0;
            maskIframe.src = "about:blank";
            shadowDiv.appendChild(maskIframe);
        }
        document.body.insertBefore(shadowDiv, document.body.firstChild); //遮罩层加入文档
        //弹出框
        var styleStr1 = 'display:block;position:fixed;_position:absolute;left:' + (winSize.windowWidth / 2 - 200) + 'px;top:' + (winSize.windowHeight / 2 - 150) + 'px;_top:' + (winSize.windowHeight / 2 + top - 150)+ 'px;'; //弹出框的位置
        var alertBox = document.createElement('div');
        alertBox.id = 'alertMsg';
        alertBox.style.cssText = styleStr1;
        //创建弹出框里面的内容P标签
        var alertMsg_info = document.createElement('P');
        alertMsg_info.id = 'alertMsg_info';
        alertMsg_info.innerHTML = msg;
        alertBox.appendChild(alertMsg_info);
        //创建按钮
        var btn1 = document.createElement('a');
        btn1.id = 'alertMsg_btn1';
        btn1.href = 'javas' + 'cript:void(0)';
        btn1.innerHTML = '<cite>确定</cite>';
        btn1.onclick = function () {
            document.body.removeChild(alertBox);
            document.body.removeChild(shadowDiv);
            resolve(); 
            return true;
        };
        alertBox.appendChild(btn1);
        if (mode === 1) {
            var btn2 = document.createElement('a');
            btn2.id = 'alertMsg_btn2';
            btn2.href = 'javas' + 'cript:void(0)';
            btn2.innerHTML = '<cite>取消</cite>';
            btn2.onclick = function () {
                document.body.removeChild(alertBox);
                document.body.removeChild(shadowDiv);
                rejected();
                return false;
            };
            alertBox.appendChild(btn2);
        }
        document.body.appendChild(alertBox);
     })
}




原文

林毅洋
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
自定义alert弹出框
能哥威武的博客
07-21 4169
自定义alert ，confirm 弹出框 代码如下 (function($) {               $.alerts = {                  alert: function(title, message, callback) {               if( title == null ) title = 'Alert';              
js自定义弹出框
qq_42402381的博客
05-22 9030
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #d1{ width: 400px; he...
js实现alert弹框自定义样式
weixin_44975322的博客
04-20 3895
首先用css渲染一个样式 #msg{ height: 2rem; text-align: center; position: fixed; top: 50%; margin-top: -1rem; line-height: 2rem; width: 100%; } #msg span{ color: #fff; background: #83C422; height: 2rem; display: inline-b..
js点击订阅弹出窗口
ICode联盟
10-20 126
js点击订阅弹出窗口，基于jquery实现的弹窗效果。
js 跳转链接，浏览器当前页面出弹框
ys_dd的博客
07-05 738
js 跳转链接，浏览器当前页面出弹框，window.open，弹框
JS封装弹框的两种方式
最新发布
07-08 517
【代码】JS封装弹框的两种方式。
js重写alert弹框，带样式
weixin_40717107的博客
03-27 3032
先看图： 具体代码： window.alert = function (txt, time) { if (document.getElementById("alertFram")) { return; } var alertDiv = document.createElement("DIV...
js alert confirm样式弹出框.zip
11-24
总的来说，"js alert confirm样式弹出框.zip"项目展示了如何通过前端技术自定义JavaScript内置对话框的样式，以提供更加美观和一致的用户体验。这涉及到HTML5结构化内容、CSS样式设计以及jQuery的事件处理和DOM操作...
自定义JavaScript弹出框组件
02-11
JavaScript弹出框组件的核心在于模拟原生的alert(), confirm() 和 prompt()函数，但提供更多的自定义选项。这些组件通常由HTML结构、CSS样式和JavaScript逻辑三部分组成。HTML负责构建弹出框的布局和元素，CSS用于...
js alert confirm样式弹出框特效代码
03-20
"js alert confirm样式弹出框特效代码"就是一种针对这种情况的解决方案，它通过CSS和JavaScript实现了一种美化后的对话框效果。这个代码可能包括以下部分： 1. **HTML结构**：创建自定义的对话框元素，包括消息容器...
自定义弹出框样式 alert修改
08-08
自定义弹出框样式 alert修改 根据需要修改弹出框样式
js,css做的alert提示框
07-26
NULL 博文链接：https://zhou-he.iteye.com/blog/667155
JS 模拟alert （ymPrompt3.0 消息提示组件）
05-12
JS 模拟alert （ymPrompt3.0 消息提示组件）JS 模拟alert （ymPrompt3.0 消息提示组件）
javascript弹出带文字信息的提示框效果
10-21
总的来说，实现JavaScript弹出带文字信息的提示框效果，我们需要理解DOM操作、事件处理、鼠标位置获取以及CSS样式控制等基础知识。通过这些技术，我们可以创建出符合设计需求且具有交互性的提示框，提供更加丰富的...
alert及confirm弹出框样式，换不错
11-10
`alert` 函数的基本语法是 `alert(message)`，它会弹出一个只有一个按钮的对话框，用户点击后，对话框关闭，程序继续执行。`message` 参数是向用户显示的文本字符串。 `confirm` 函数的语法是 `var result = ...
js中的alert样式修改
tsqjxy的博客
07-13 4171
浏览器自带的alert样式通常不是想要的，可以自定义样式进行修改，代码如下： 效果如下：
修改alert提示框的css样式
weixin_44570977的博客
09-27 1万+
本教程重写了alert方法,可修改蒙版颜色,提示信息的字体颜色,按钮背景颜色,按钮字体颜色,按钮水平位置等,修改方式为设定好的变量中直接修改变量值,若有需要也可直接修改本教程中的代码. 重写后的弹出框不仅仅能够显示文字,也可以显示图片,甚至是其他内容,具体效果可在该文章最后面查看提供的图片. 建议封装到单独的文件中,如alert.js. window.alert = function(msg){ ...
js三种消息框总结-警告框、确认框、提示框
热门推荐
dev_zyx的博客
05-05 2万+
我们在访问网站的时候，有时会突然弹出一个小窗口，上面写着一段提示信息文字。如果你不点击“确定”，就不能对网页做任何操作，这个小窗口就是使用alert实现的。 注:alert弹出消息对话框(包含一个确定按钮)。 语法: alert(字符串或变量); 注意:1. 在点击对话框"确定"按钮前，不能进行任何其它操作。2. 消息对话框通常可以用于调试程序。3. alert输出内容，可以是字符串或变量...
Js-Alert弹出框几种样式（一级）
weixin_33714884的博客
11-29 5849
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~js-alert弹出框样式第一种~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~推荐地址：https:...
alert弹出框如何自定义宽度
05-30
要自定义 `alert` 弹出框的宽度，您可以使用 CSS 样式来实现。首先，您需要使用 JavaScript 来触发 `alert` 弹出框。然后，在弹出框出现之后，您可以使用 `document.querySelector()` 方法来选择弹出框的 DOM 元素，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值