自定义alert和confirm

最新推荐文章于 2023-12-01 10:46:55 发布

童登达

最新推荐文章于 2023-12-01 10:46:55 发布

阅读量2.8k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/tongdengquan/article/details/52679290

版权

前端专栏收录该内容

45 篇文章 0 订阅

订阅专栏

本文介绍了一种使用JavaScript自定义实现警告框和确认框的方法。通过编写特定的函数来显示不同样式的对话框，并提供了确认框回调函数的支持。这些自定义对话框可以应用于网页交互中，提供更美观且灵活的用户反馈。

摘要由CSDN通过智能技术生成

var common = {};
common.showAlert = function (msg) {
    var html = "<div id='dialog_alert' class=\"eject dialog_alert\" style=\"display:block;z-index:9999999999;\">";
    html+="<div class=\"web-feedback w400\">";
    html+="<div class=\"eject-ly\">";
    html+="<div class=\"eject-ly-lef fl\">";
    html+="<span class=\"fl\"><img src=\"images/ckwls_03.jpg\"></span>";
    html+="<span class=\"fl eject-ckl\">提示</span>";
    html+="<span class=\"fl\"><img src=\"images/ckwls_05.jpg\"></span>";
    html+="</div>";
    html += "<div class=\"fr eject-lyr\" οnclick='common.hideAlert()'>";
    html+="<img src=\"images/close.jpg\">";
    html+="</div>";
    html+="</div>";
    html+="<div class=\"upload-prompt\">";
    html += msg;
    html+="</div>";
    html+="</div>";
    html+="<div class=\"hiddenDiv\"> </div>";
    html+="</div>";
    $("body").append(html);
}
common.hideAlert = function () {
   $(".dialog_alert").remove();
}

common.showWarn = function (msg) {
    var html = "<div id='dialog_warn'   οnclick='common.hideWarn()' class=\"eject dialog_warn\" style=\"display:block;z-index:9999999999;\">";
    html += "<div class=\"web-feedback w400\">";
    html += "<div class=\"eject-ly\">";
    html += "<div class=\"eject-ly-lef fl\">";
    html += "<span class=\"fl\"><img src=\"images/ckwls_03.jpg\"></span>";
    html += "<span class=\"fl eject-ckl\">提示</span>";
    html += "<span class=\"fl\"><img src=\"images/ckwls_05.jpg\"></span>";
    html += "</div>";
    html += "<div class=\"fr eject-lyr\" οnclick='common.hideWarn()'>";
    //html += "<img src=\"images/close.jpg\">";
    html += "</div>";
    html += "</div>";
    html += "<div class=\"upload-prompt\">";
    html += msg;
    html += "</div>";
    html += "</div>";
    html += "<div class=\"hiddenDiv\"> </div>";
    html += "</div>";
    $("body").append(html);
    $('#dialog_warn').fadeIn('slow');
}
common.hideWarn = function () {
    $(".dialog_warn").fadeTo("slow", 0.01, function () {//fade
        $(this).slideUp("slow", function () {//slide up
            $(this).remove();//then remove from the DOM
        });
    });
}


/*
*自定义confirm  调用方法common.showConfirm("确定***吗？",function(){alert('确定函数')},function(){alert('不确定函数')});
*/
common.showConfirm = function (msg, callback_ok,callback_cancel) {
    var html = "<div class=\"eject dialog_confirm\" ng-show=\"confirmstate\" style=\"display:block;z-index:9999999999;\">";
    html += "<div class=\"web-feedback w280\">";
    html += "<div class=\"eject-ly\">";
    html += "<div class=\"eject-ly-lef fl\">";
    html += "<span class=\"fl\"><img src=\"images/ckwls_03.jpg\"></span>";
    html += "<span class=\"fl eject-ckl\">确认</span>";
    html += "<span class=\"fl\"><img src=\"images/ckwls_05.jpg\"></span>";
    html += "</div>";
    html += "<div class=\"fr eject-lyr\">";
    html += "<img src=\"images/close.jpg\" οnclick=\"common.hideConfirm()\">";
    html += "</div>";
    html += "</div>";

    html += "<div class=\"alert-contet\" style=\"min-height:10px;\">";
    html += msg;
    html += "</div>";
    
    html += "<div class=\"confirm-confirm\">";
    html += "<a class=\"fl confirm-con\" id=\"confirm_ok\">确认</a>";
    html += "<a class=\"fr confirm-esc\" id=\"confirm_cancel\">取消</a>";
    html += "</div>";

    html += "</div>";
    html += "<div class=\"hiddenDiv\"> </div>";
    html += "</div>";
    $("body").append(html);
    $("#confirm_ok").click(function () {
        if (callback_ok && typeof callback_ok == "function")
            callback_ok(true);
        $(".dialog_confirm").remove();
    });
    $("#confirm_cancel").click(function () {
        if (callback_cancel && typeof callback_cancel == "function")
            callback_cancel(true);
        $(".dialog_confirm").remove();
    });
}