重写alert、confirm、promot三种弹出框
程序员文章站
2022-04-09 09:14:48
...
重写alert、confirm、promot三种弹出框,去除传统的弹出框中带有的网址
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--用于弹框样式 add by lory 20191010-->
<style type="text/css">
.flowmsg {
width: 266px;
position: fixed;
z-index: 999;
top: 49%;
margin-top: -80px;
left: 50%;
margin-left: -133px;
background: #fff;
box-shadow: 5px 5px 8px #999;
font-size: 17px;
color: #666;
border: 1px solid #f8f8f8;
text-align: center;
line-height: 2rem;
display: inline-block;
padding-bottom: 20px;
border-radius: 2px;
}
.flow_top {
background: #f8f8f8;
padding: 5px 15px 5px 20px;
text-align: left;
}
.flow_close {
font-size: 22px;
float: right;
cursor: pointer;
}
.flowmsg_cont {
padding: 15px 20px 20px;
text-align: left;
}
.flowmsg_close {
display: inline-block;
color: #fff;
padding: 1px 15px;
background: #1d7dd4;
border-radius: 2px;
float: right;
margin-right: 15px;
cursor: pointer;
}
#flow_prompt_cont {
padding: 10px 20px 10px;
text-align: left;
}
.flow_prompt_input{
padding: 0px 20px 20px;
text-align: left;
display: block;
height: auto ;
}
#flow_prompt_input{
width:100%;
}
</style>
<script src="jquery-2.1.1.min.js"></script>
</head>
<body>
<!--重写alert、confirm、prompt-->
<script type="text/javascript">
function alert(e) {
$("body").append('<div id="flow_alert" class="flowmsg"><div id="flow_alert_top" class="flow_top">信息<span class="flow_close">×</span></div><div id="flow_alert_cont" class="flowmsg_cont">' + e + '</div><div class="flowmsg_close" id="flow_alert_clear">确定</div></div>');
$("#flow_alert_clear,.flow_close").click(function () {
$("#flow_alert").remove();
});
}
function confirm(e) {
$("body").append('<div id="flowmsg" class="flowmsg"><div id="flowmsg_top" class="flow_top">信息<span class="flow_close">×</span></div><div id="flowmsg_cont" class="flowmsg_cont">' + e + '</div><div class="flowmsg_close" id="flowmsg_sure">确定</div><div class="flowmsg_close" id="flowmsg_clear">取消</div></div>');
$("#flowmsg_sure").click(function () {
$("#flowmsg").remove();
return true;
});
$("#flowmsg_clear,.flow_close").click(function () {
$("#flowmsg").remove();
return false;
});
}
function prompt(e,f) {
$("body").append('<div id="flow_prompt" class="flowmsg"><div id="flow_prompt_top" class="flow_top">信息<span class="flow_close">×</span></div><div id="flow_prompt_cont" class="flowmsg_cont">' + e + '</div><div class="flow_prompt_input"><input type="text" id="flow_prompt_input" name="flow_prompt_input" value='+f+'></div><div class="flowmsg_close" id="flow_prompt_sure">确定</div><div class="flowmsg_close" id="flow_prompt_clear">关闭</div></div>');
$("#flow_prompt_sure").click(function () {
var kk = $("#flow_prompt_input").val();
$("#flow_prompt").remove();
return kk;
});
$("#flow_prompt_clear,.flow_close").click(function () {
$("#flow_prompt").remove();
});
};
alert(123);
</script>
</body>
</html>
上一篇: 图片处理
下一篇: spring aop小例子
推荐阅读
-
JavaScript的三种弹出提示框(alert、confirm、prompt)
-
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
-
JavaScript的三种弹出提示框(alert、confirm、prompt)
-
javascript的三种弹出对话框alert,confirm和prompt
-
隐藏alert和confirm弹出框的IP
-
JavaScript的三种消息框alert,confirm,prompt
-
重写alert、confirm、promot三种弹出框
-
bootstrap 弹出框 alert、confirm
-
JavaScript中常用的3种弹出提示框(alert、confirm、prompt)
-
JavaScript的三种弹出提示框(alert、confirm、prompt)