JS实现IOS风格对话框 jquery / zepto

时间：2022-08-16 05:12:46

Alert

	alert("这个是一个alert弹窗");

Alert 自定义参数

    alert({

        content: "自定义alert弹窗",

        btnText: "OK",

        boxClass: "custom-alert"

    }, function () {

        console.log("good！");

    });

Confirm

    confirm("这个是一个confirm弹窗", function (flag) {

        if (flag) {

            alert("你点了确定");

        } else {

            alert("你点了取消");

        }

    });

Confirm 自定义参数

    confirm({

        content: "自定义参数confirm弹窗",

        okText: "OK",

        cancelText: "cancen",

        boxClass: "custom-confirm"

    }, function (flag) {

        if (flag) {

            alert("你点了确定");

        } else {

            alert("你点了取消");

        }

    });

Prompt

	prompt("今天天气不错啊！");

Prompt自定义

	document.getElementById("bn-prompt2").onclick = function () {

		prompt({

			content: "明天的天气也应该不错",

			delay: 5000,

			boxClass: "prompt-red"	//这里可以自定义样式，如：字体、背景色等。

		});

	};

20151013更新

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JS仿IOS风格对话框 jquery / zepto</title>

<style>

/*对话框*/

.dialog {width:%;height:%;position:fixed;top:;left:;z-index:;}

.dialog-overlay {width:%;height:%;position:absolute;top:;left:;z-index:;background-color:#;opacity:.;filter:alpha(opacity:);}

.dialog-box {width:%;position:absolute;top:%;left:%;margin:-80px   -%;z-index:;background-color:#fff;border-radius:5px;text-align:center;}

.dialog-detail {padding:30px 20px;font-size:16px;line-height:1.5;}

.dialog-opera {width:%;height:50px;box-shadow: 1px 1px -1px # inset;}

.dialog-btn {height:50px;border:none;background:none;color:#157efb;font-size:15px;line-height:50px;cursor:pointer;}

.dialog-btn-close {width:%;}

.dialog-btn-cancel, .dialog-btn-ok {width:%;float:left;}

.dialog-btn-ok {box-shadow:-1px  1px -1px #;}

.prompt {max-width:%;position:fixed;top:%;left:%;z-index:;padding:15px 20px;background-color:rgba(,,,.);color:#fff;border-radius:5px;line-height:1.4;font-size:14px;transition:opacity .5s;}

</style>

</head>

<body>

<p><button id="bn-alert">Alert</button></p>

<pre>

    alert("这个是一个alert弹窗");

</pre>

<p>&nbsp;</p>

<p><button id="bn-alert2">Alert 自定义参数</button></p>

<pre>

    alert({

        content: "自定义alert弹窗",

        btnText: "OK",

        boxClass: "custom-alert"

    }, function () {

        console.log("good！");

    });

</pre>

<p>&nbsp;</p>

<p><button id="bn-confirm">Confirm</button></p>

<pre>

    confirm("这个是一个confirm弹窗", function (flag) {

        if (flag) {

            alert("你点了确定");

        } else {

            alert("你点了取消");

        }

    });

</pre>

<p>&nbsp;</p>

<p><button id="bn-confirm2">Confirm 自定义参数</button></p>

<pre>

    confirm({

        content: "自定义参数confirm弹窗",

        okText: "OK",

        cancelText: "cancen",

        boxClass: "custom-confirm"

    }, function (flag) {

        if (flag) {

            alert("你点了确定");

        } else {

            alert("你点了取消");

        }

    });

</pre>

<p><button id="bn-prompt">Prompt</button></p>

<pre>

    prompt("今天天气不错啊！");

</pre>

<p><button id="bn-prompt2">Prompt自定义</button></p>

<pre>

    document.getElementById("bn-prompt2").onclick = function () {

        prompt({

            content: "明天的天气也应该不错",

            delay: ,

            boxClass: "prompt-red"    //这里可以自定义样式，如：字体、背景色等。

        });

    };

</pre>

<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>

<script>

/*

* 对话框插件

* 赵欢磊 20150915

*/

var dialog = {

    //对话框

    alert: function (obj, callback) {

        var content = obj.content || obj || "",

            btnText = obj.btnText || "确定",

            boxClass = obj.boxClass || "",

            alertHtml = '\

                <div class="dialog '+ boxClass +'">\

                    <div class="dialog-box">\

                        <div class="dialog-detail">' + content + '</div>\

                        <div class="dialog-opera">\

                            <button class="dialog-btn dialog-btn-close">' + btnText +  '</button>\

                        </div>\

                    </div>\

                    <div class="dialog-overlay"></div>\

                </div>';

        //document.body.insertAdjacentHTML("beforeend", alertHtml);

        $(".dialog").remove();

        $("body").append(alertHtml);

        var dialog = $(".dialog"),

            btnClose = $(".dialog-btn-close");

        btnClose.on("click", function () {

            dialog.remove();

            if (callback) {

                callback();

            }

        });

    },

    confirm: function (obj, callback) {

        var content = obj.content || obj || "",

            okText = obj.okText || "确定",

            cancelText = obj.cancelText || "取消",

            boxClass = obj.boxClass || "",

            confirmHtml = '\

                <div class="dialog '+ boxClass +'">\

                    <div class="dialog-box">\

                        <div class="dialog-detail">' + content + '</div>\

                        <div class="dialog-opera">\

                            <button class="dialog-btn dialog-btn-cancel">' + cancelText + '</button>\

                            <button class="dialog-btn dialog-btn-ok">' + okText + '</button>\

                        </div>\

                    </div>\

                    <div class="dialog-overlay"></div>\

                </div>';

        $(".dialog").remove();

        $("body").append(confirmHtml);

        var dialog = $(".dialog"),

            btnOk = $(".dialog-btn-ok"),

            btnCancel = $(".dialog-btn-cancel"),

            flag = true,

            oprea = function () {

                dialog.remove();

                if (callback) {

                    callback(flag);

                }

            };

        btnOk.on("click", function () {

            flag = true;

            oprea();

        });

        btnCancel.on("click", function () {

            flag = false;

            oprea();

        });

    },

    prompt: function (obj, callback) {

        var content = obj.content || obj || "",

            boxClass = obj.boxClass || "",

            delay = obj.delay || ,

            msgHtml = '<div class="prompt ' + boxClass + '">' + content + '</div>';

        $(".prompt").remove();

        $("body").append(msgHtml);

        var prompt = $(".prompt"),

            promptWidth = prompt.width();

        prompt.css({"margin-left": -promptWidth / });

        setTimeout(function () {

            prompt.css({ "opacity": });

            setTimeout(function () {

                prompt.remove();

                if (callback) {

                    callback();

                }

            }, );

        }, delay);

    }

};

//替换系统默认对话框

window.alert = dialog.alert;

window.confirm = dialog.confirm;

window.prompt = dialog.prompt;

</script>

<script>

    document.getElementById("bn-alert").onclick = function () {

        alert("这个是一个alert弹窗");

    };

    document.getElementById("bn-alert2").onclick = function () {

        alert({

            content: "自定义alert弹窗",

            btnText: "OK",

            boxClass: "custom-alert"

        }, function () {

            console.log("good！");

        });

    };

    document.getElementById("bn-confirm").onclick = function () {

        confirm("这个是一个confirm弹窗", function (flag) {

            if (flag) {

                alert("你点了确定");

            } else {

                alert("你点了取消");

            }

        });

    };

    document.getElementById("bn-confirm2").onclick = function () {

        confirm({

            content: "<h2>自定义参数confirm弹窗</h2>",

            okText: "OK",

            cancelText: "cancen",

            boxClass: "custom-confirm"

        }, function (flag) {

            if (flag) {

                alert("你点了确定");

            } else {

                alert("你点了取消");

            }

        });

    };

    document.getElementById("bn-prompt").onclick = function () {

        prompt("今天天气不错啊！");

    };

    document.getElementById("bn-prompt2").onclick = function () {

        prompt({

            content: "明天的天气也应该不错",

            delay: ,

            boxClass: "prompt-red"    //这里可以自定义样式，如：字体、背景色等。

        });

    };

</script>

</body>

</html>

第1版：

<!doctype html>

<html>

<head>

<meta charset="utf-8">

<title>JS仿IOS风格对话框</title>

<style>

/*对话框*/

.dialog {width:%;height:%;position:fixed;top:;left:;z-index:;}

.dialog-overlay {width:%;height:%;position:absolute;top:;left:;z-index:;background-color:#;opacity:.;filter:alpha(opacity:);}

.dialog-box {width:%;position:absolute;top:%;left:%;margin:-80px   -%;z-index:;background-color:#fff;border-radius:5px;text-align:center;}

.dialog-detail {padding:30px 20px;font-size:20px;line-height:1.5;}

.dialog-opera {width:%;border-top:1px solid #ddd;}

.dialog-btn {height:50px;border:none;background:none;color:#157efb;font-size:18px;line-height:50px;cursor:pointer;}

.dialog-btn-close {width:%;}

.dialog-btn-cancel, .dialog-btn-ok {width:%;float:left;}

.dialog-btn-ok {border-left:1px solid #ddd;box-sizing:border-box;}

</style>

</head>

<body>

<p><button id="bn-alert">Alert</button></p>

<pre>

    alert("这个是一个alert弹窗");

</pre>

<p>&nbsp;</p>

<p><button id="bn-alert2">Alert 自定义参数</button></p>

<pre>

    alert({

        content: "自定义alert弹窗",

        btnText: "OK",

        boxClass: "custom-alert"

    }, function () {

        console.log("good！");

    });

</pre>

<p>&nbsp;</p>

<p><button id="bn-confirm">Confirm</button></p>

<pre>

    confirm("这个是一个confirm弹窗", function (flag) {

        if (flag) {

            alert("你点了确定");

        } else {

            alert("你点了取消");

        }

    });

</pre>

<p>&nbsp;</p>

<p><button id="bn-confirm2">Confirm 自定义参数</button></p>

<pre>

    confirm({

        content: "自定义参数confirm弹窗",

        okText: "OK",

        cancelText: "cancen",

        boxClass: "custom-confirm"

    }, function (flag) {

        if (flag) {

            alert("你点了确定");

        } else {

            alert("你点了取消");

        }

    });

</pre>

<script>

/*

* 对话框插件

* 赵欢磊 20150915

*/

var dialog = {

    //对话框

    alert: function (elem, callback) {

        var content = elem.content || elem || "",

            btnText = elem.btnText || "确定",

            boxClass = elem.boxClass || "",

            alertHtml = '\

                <div class="dialog '+ boxClass +'">\

                    <div class="dialog-box">\

                        <div class="dialog-detail">' + content + '</div>\

                        <div class="dialog-opera">\

                            <button class="dialog-btn dialog-btn-close">' + btnText +  '</button>\

                        </div>\

                    </div>\

                    <div class="dialog-overlay"></div>\

                </div>';

        document.body.insertAdjacentHTML("beforeend", alertHtml);

        var dialog = document.querySelector(".dialog"),

            btnClose = dialog.querySelector(".dialog-btn-close");

        btnClose.onclick = function () {

            dialog.remove();

            if (callback) {

                callback();

            }

        };

    },

    confirm: function (elem, callback) {

        var content = elem.content || elem || "",

            okText = elem.okText || "确定",

            cancelText = elem.cancelText || "取消",

            boxClass = elem.boxClass || "",

            confirmHtml = '\

                <div class="dialog '+ boxClass +'">\

                    <div class="dialog-box">\

                        <div class="dialog-detail">' + content + '</div>\

                        <div class="dialog-opera">\

                            <button class="dialog-btn dialog-btn-cancel">' + cancelText + '</button>\

                            <button class="dialog-btn dialog-btn-ok">' + okText + '</button>\

                        </div>\

                    </div>\

                    <div class="dialog-overlay"></div>\

                </div>';

        document.body.insertAdjacentHTML("beforeend", confirmHtml);

        var dialog = document.querySelector(".dialog"),

            btnOk = dialog.querySelector(".dialog-btn-ok"),

            btnCancel = dialog.querySelector(".dialog-btn-cancel"),

            flag = true,

            result = function () {

                dialog.remove();

                if (callback) {

                    callback(flag);

                }

            };

        btnOk.onclick = function () {

            flag = true;

            result();

        };

        btnCancel.onclick = function () {

            flag = false;

            result();

        };

    }

};

//替换系统默认对话框

window.alert = dialog.alert;

window.confirm = dialog.confirm;

</script>

<script>

    document.getElementById("bn-alert").onclick = function () {

        alert("这个是一个alert弹窗");

    };

    document.getElementById("bn-alert2").onclick = function () {

        alert({

            content: "自定义alert弹窗",

            btnText: "OK",

            boxClass: "custom-alert"

        }, function () {

            console.log("good！");

        });

    };

    document.getElementById("bn-confirm").onclick = function () {

        confirm("这个是一个confirm弹窗", function (flag) {

            if (flag) {

                alert("你点了确定");

            } else {

                alert("你点了取消");

            }

        });

    };

    document.getElementById("bn-confirm2").onclick = function () {

        confirm({

            content: "<h2>自定义参数confirm弹窗</h2>",

            okText: "OK",

            cancelText: "cancen",

            boxClass: "custom-confirm"

        }, function (flag) {

            if (flag) {

                alert("你点了确定");

            } else {

                alert("你点了取消");

            }

        });

    };

</script>

</body>

</html>

相关文章