zoukankan html css js c++ java

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

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

    alert({
        content: "自定义alert弹窗",
        btnText: "OK",
        boxClass: "custom-alert"
    }, function () {
        console.log("good！");
    });

    confirm("这个是一个confirm弹窗", function (flag) {
        if (flag) {
            alert("你点了确定");
        } else {
            alert("你点了取消");
        }
    });

    confirm({
        content: "自定义参数confirm弹窗",
        okText: "OK",
        cancelText: "cancen",
        boxClass: "custom-confirm"
    }, function (flag) {
        if (flag) {
            alert("你点了确定");
        } else {
            alert("你点了取消");
        }
    });

	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 {100%;height:100%;position:fixed;top:0;left:0;z-index:1000;}
.dialog-overlay {100%;height:100%;position:absolute;top:0;left:0;z-index:1;background-color:#000;opacity:.7;filter:alpha(opacity:70);}
.dialog-box {80%;position:absolute;top:50%;left:50%;margin:-80px 0 0 -40%;z-index:2;background-color:#fff;border-radius:5px;text-align:center;}
.dialog-detail {padding:30px 20px;font-size:16px;line-height:1.5;}
.dialog-opera {100%;height:50px;box-shadow:0 1px 1px -1px #888 inset;}
.dialog-btn {height:50px;border:none;background:none;color:#157efb;font-size:15px;line-height:50px;cursor:pointer;}
.dialog-btn-close {100%;}
.dialog-btn-cancel, .dialog-btn-ok {50%;float:left;}
.dialog-btn-ok {box-shadow:-1px 0 1px -1px #888;}
.prompt {max-50%;position:fixed;top:45%;left:50%;z-index:1000;padding:15px 20px;background-color:rgba(0,0,0,.8);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: 5000,
            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 || 2000,
            msgHtml = '<div class="prompt ' + boxClass + '">' + content + '</div>';
        $(".prompt").remove();
        $("body").append(msgHtml);
        var prompt = $(".prompt"),
            promptWidth = prompt.width();
        prompt.css({"margin-left": -promptWidth / 2});
        setTimeout(function () {
            prompt.css({ "opacity": 0});
            setTimeout(function () {
                prompt.remove();
                if (callback) {
                    callback();
                }
            }, 500);
        }, 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: 5000,
            boxClass: "prompt-red"    //这里可以自定义样式，如：字体、背景色等。
        });
    };
    
</script>


</body>
</html>

第1版：

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>JS仿IOS风格对话框</title>
<style>
/*对话框*/
.dialog {100%;height:100%;position:fixed;top:0;left:0;z-index:1000;}
.dialog-overlay {100%;height:100%;position:absolute;top:0;left:0;z-index:1;background-color:#000;opacity:.7;filter:alpha(opacity:70);}
.dialog-box {80%;position:absolute;top:50%;left:50%;margin:-80px 0 0 -40%;z-index:2;background-color:#fff;border-radius:5px;text-align:center;}
.dialog-detail {padding:30px 20px;font-size:20px;line-height:1.5;}
.dialog-opera {100%;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 {100%;}
.dialog-btn-cancel, .dialog-btn-ok {50%;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>

查看全文

相关阅读:
haproxy frontend 和backend
haproxy 页面重定向(域名跳转)
LWP::Simple 模块
 Perl LWP模块
 错误代码： 1582 Incorrect parameter count in the call to native function 'str_to_date'
perl 面向对象 -> 符号使用
 跨域访问设置
 mysql 主从复制用户权限限制
 错误代码： 1045 Access denied for user 'skyusers'@'%' (using password: YES)
sync_relay_log

原文地址：https://www.cnblogs.com/huanlei/p/4810091.html