重写简易的confirm函数

Posted windy-xmwh

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了重写简易的confirm函数相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="http://code.jquery.com/jquery-3.5.1.min.js"></script>
    <title>Title</title>
</head>
<body>
<!--    <div style="position: absolute; width: 300px; height: 100px; margin-left: auto; margin-right: auto; left: 0; right: 0; border: 1px solid #e2e2e2; border-radius: 5px; font-family: YouYuan">-->
<!--        <div style="background-color: deepskyblue; height: 30px; line-height: 30px; border-radius: 5px 5px 0 0; padding-left: 10px">温馨提示</div>-->
<!--        <div style="padding: 10px 5px">这是一条消息</div>-->
<!--        <div id="more" style="display: none">这是更多消息</div>-->
<!--        <div style="position: absolute; bottom: 10%; right: 5%">-->
<!--            <button style="background-color:deepskyblue; border-radius: 5px; width: 50px; height: 30px; padding: 0; margin: 0; border: 1px transparent; outline: none">确定</button>-->
<!--            <button style="border-radius: 5px; width: 50px; height: 30px; padding: 0; margin: 0; border: 1px transparent; outline: none">取消</button>-->
<!--        </div>-->
<!--    </div>-->

<button onclick="up()">confirm</button>
</body>
</html>

<script>

    function up() {
        var message = "这是展示消息";
        myConfirm(message);
    }

    function myConfirm(message) {
        var html = ‘ <div id="popup" style="position: absolute; width: 400px; height: 145px; margin-left: auto; margin-right: auto; left: 0; right: 0; border: 1px solid #e2e2e2; border-radius: 5px; font-family: YouYuan">
‘ +
            ‘        <div style="background-color: #00bfff; height: 30px; line-height: 30px; border-radius: 5px 5px 0 0; padding-left: 10px">温馨提示</div>
‘ +
            ‘        <div style="padding: 10px 5px">‘ + message + ‘</div>
‘ +
            ‘        <div id="more" style="display: none; padding: 0px 5px">这是更多消息</div>
‘ +
            ‘        <div style="position: absolute; bottom: 10%; right: 5%">
‘ +
            ‘            <button style="background-color:deepskyblue; border-radius: 5px; width: 50px; height: 30px; padding: 0; margin: 0; border: 1px transparent; outline: none" onclick="yes()">确定</button>
‘ +
            ‘            <button style="border-radius: 5px; width: 50px; height: 30px; padding: 0; margin: 0; border: 1px transparent; outline: none" onclick="no()">取消</button>
‘ +
            ‘        </div>
‘ +
            ‘    </div>‘;

            $("body").prepend(html);
    }

    function yes() {
        // $("#popup").css({display: "none"})
        // if (document.getElementById("more").style.display === "none") {
        //     $("#more").css({display: "block"});
        //     $("#popup").css({height: "140px"});
        // }else{
        //     $("#more").css({display: "none"});
        //     $("#popup").css({height: "100px"});
        // }
        window.
        $("#popup").css({display: "none"});
        alert("点击了“确定”");
    }
    function no() {
        $("#popup").css({display: "none"});
        alert("点击了“取消”");
    }
</script>

技术图片

 

以上是关于重写简易的confirm函数的主要内容，如果未能解决你的问题，请参考以下文章

简易封装confirm $.confirm

java里的confirm框有办法禁用关闭按钮或者将点cancel取消和点X关闭区分开来吗？

去除移动端alert/confirm的网址(url)

Shell外壳的简易模拟

html如何修改alert和confirm对话框的按钮文字?

Alert 重写