您的位置：首页 > Web前端 > CSS

js和css重写Confirm提示窗口，支持服务器控件调用。

2018-03-30 14:18 357 查看

js和css重写Alert和Confirm提示窗口，支持服务器控件调用。

　　js自带的Alert和Confirm窗口样貌丑陋，且每个浏览器的实现方式都不一样（弹出位置等），而且还不支持自己输入样式和自定义返回函数等。

　　在一次.NET的web开发过程中，为用户提供一个删除功能时，在用户删除前弹出提示框，这做起来方法很多。

  1. 可以前台写个按钮（input，button）或者连接（a）标签，又或者随便一个标签，然后加个click事件，在click事件中用ajax来调用服务器代码，进行更新数据。如果你要改的代码或者新写的代码是这样的，那恭喜你，你造福了你自己和你的后来者。

  2. 使用.net自带的服务器控件来做。如果你是在改代码，而且时间不允许你重新构建整个表格区域，又或者是你不想改前辈们的劳动成果，那么你很有可能就直接添加了一个服务器控件，然后添加一个onClientClick事件，直接return confirm(“xxxx”)来简单实现一个提示窗口。

　　但是作为一个很有责任感的开发人员，作为一个追求完美的开发者，在这前端越来越让人眼花缭乱的前端开发世界里，仍旧使用原生的Confirm实在是让人心里发麻，很不爽。所以花了点时间研究如何自定义新的弹窗来做替换。多说无益，真枪实弹才是真，直接上代码。

前台HTML文件代码和调用方法：

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>模拟alert和confirm提示框</title>
<script src="../js/jquery-1.12.4.js"></script>
<script src="../js/confirm.js"></script>
</head>
<body>

4000
<input id="add" type="button" value="添加" onclick="AlertDemo()"/>
<input id="update" type="button" value="修改" onclick="ConfirmDemo()" />
<script>
//非服务器控件调用Alert
function AlertDemo(){
PlusAlert("模拟Alert弹窗", "模拟Alert成功！");
}
//非服务器控件调用Confirm
function ConfirmDemo(){
PlusConfirm("模拟Confirm弹窗", "模拟Confirm成功！", 340, function (r) {
if (r) {
PlusAlert("模拟Alert弹窗", "你单击了确定");
} else {
PlusAlert("模拟Alert弹窗", "你单击了取消");
}
});
}
</script>
</body>
</html>


生成弹窗的js代码：

$(function () {
//css样式
var strStyle = "<style type='text/css'>";
strStyle += ".confirmPop a{text-decoration: none;}";
strStyle += ".confirmPop{width:350px; border:#64a64b solid 1px; position:absolute;background:#fff;z-index: 9999;left: 40%;top: 40%;font-family:Microsoft Yahei;}";
strStyle += ".confirmTitle{ background-color:#69ae4e; position:relative;}";
strStyle += ".confirmTitle span{line-height: 30px;margin-left: 5px;font-size: 15px;color: white;}";
strStyle += ".confirmText{ margin:20px 0;text-align: center;}.confirmText span{ font-size: 15px;}";
strStyle += ".confirmBtnBox{ text-align:center; margin:10px 0;}";
strStyle += ".confirmBtnBox .btn{ display:inline-block; padding:0 28px; height:30px; line-height:30px; color:#fff; background-color: #64a64b;margin: 0 10px;}";
strStyle += ".confirmBtnBox .btn:hover{ background-color:#509236;}";
strStyle += ".confirmGlobal{display: block; position: fixed; clear: both; z-index: 9999; left: 0px; top: 0px; bottom: 0px;border: 0px solid rgb(255, 255, 255); width: 100%; height: 100%; opacity: 0.5; background: rgb(255, 255, 255);}";
strStyle += "</style>";
$("head").append(strStyle)
//js事件
$.alerts = {
alert: function (title, message, width, callback) {
if (title == null) title = 'Alert';
$.alerts._show(title, message, width, 'alert', callback);
},
confirm: function (title, message, width, callback) {
if (title == null) { title = 'Confirm'; }
return $.alerts._show(title, message, width, 'confirm', callback);
},
_show: function (title, msg, width, type, callback) {
renderHtml(title, msg, width, type);
switch (type) {
case 'alert':
$("#confirmBtnSure").click(function () {
$.alerts._hide();
if (callback) {
callback(true);
}
});
$("#confirmBtnSure").focus().keypress(function (e) {
if (e.keyCode == 13 || e.keyCode == 27) {
$("#confirmBtnSure").trigger('click');
}
});
break;
case 'confirm':
$("#confirmBtnSure").click(function () {
$.alerts._hide();
if (callback) {
return callback(true);
}
});
$("#confirmBtnCancel").click(function () {
$.alerts._hide();
if (callback) {
return callback(false);
}
});
$("#confirmBtnCancel").focus();
$("#confirmBtnSure, #confirmBtnCancel").keypress(function (e) {
if (e.keyCode == 13) {//回车
$("#confirmBtnSure").trigger('click');
}
if (e.keyCode == 27) {//ESC
$("#confirmBtnCancel").trigger('click');
}
});
break;
}
},
_hide: function () {
$("#confirmId,#confirmGlobal").remove();
}
}
//修改Alert弹层提示框
//标题-title，提示信息-altInfo，确认按钮函数-callback，宽度-width
PlusAlert = function (title, message, width, callback) {
$.alerts.alert(title, message, width, callback);
}
//修改Confirm弹层提示框
PlusConfirm = function (title, message, width, callback) {
$.alerts.confirm(title, message, width, callback);
};
})
//生成html并渲染样式
function renderHtml(title, msg, width, type) {
if (width) {
strPrompt = "<div id='confirmId' style='width: " + width + "px'>";
} else {
strPrompt = "<div id='confirmId'>";
}
strPrompt += "<div id='confirmTitleDiv'><span id='confirmTitle'>" + title + "</span></div><div id='confirmTextDiv'><span id='confirmInfo'>";
strPrompt += msg + "</span></div><div id='confirmBtnBox'>";
strPrompt += "<a class='btn' href='javascript:void(0)' id='confirmBtnSure'>确认</a>";
if (type == "confirm") {
strPrompt += "<a class='btn' href='javascript:void(0)' id='confirmBtnCancel'>取消</a>";
}
strPrompt += "</div></div>";
$("body").append(strPrompt)
//遮罩层
$("#confirm
bd8d
Id").before("<div id='confirmGlobal'></div>")
//手动渲染样式
$("#confirmId").attr("class", "confirmPop");
$("#confirmTitleDiv").attr("class", "confirmTitle");
$("#confirmTextDiv").attr("class", "confirmText");
$("#confirmBtnBox").attr("class", "confirmBtnBox");
$("#confirmBtnSure").attr("class", "btn");
$("#confirmBtnCancel").attr("class", "btn");
$("#confirmGlobal").attr("class", "confirmGlobal");
}


　　弹窗的css样式已经写在了js文件中，这样就不用再引用一次css文件，只需要引用一个js文件即可。当然将css写到另外的文件，自己修改样式时会更方便。

　　通过以上的代码，对非服务器控件，你完全可以实现一个自定义的alert和confirm窗口，里面的所有东西你都可以修改，样式完全可以根据自己的需求自定义。

  对于服务器控件，通过添加onclientclick事件，调用renturn PlusConfirm()来实现一个提示时，你会发现他的返回值永远是true，还没等你点击确定或者取消，页面已经被提交到后台执行了。

　　实现一个自定义的提示窗口，然后自定义返回函数这些都简单，半小时一小时就能实现，烦人的是对于服务器控件，在调用了自定义窗口完成后，并不会阻塞程序，等待用户的下一步操作指示再进行是否提交到后台执行。

我尝试用了while循环，结果失败，因为while执行的过程中你无法操作；用Timeout来做，还是失败，延时0微妙，你还是不能操作界面，大于0秒，程序会还没等你跑Timeout方法就已经提交到后台执行；那就只能阻塞js的进程咯，然后找半天的结果和上面两种差不多的结果。

经过不懈的努力，我想到了实现方法。其实上面的while和Timeout的尝试中我已经无限接近这个答案了。

服务器控件调用自定义提示窗口的代码：

//后台控件调用自定义confirm窗口时，需要单击控件后先返回false，当点击确定时，再次模拟点击控件。
var IsOk = false;
function bgControlConfirm() {
if (IsOk) {
return true;
}
PlusConfirm("模拟Confirm弹窗", "模拟服务器控件调用Confirm弹窗", 340, function (r) {
if (r) {
IsOk = true;
document.getElementById('SignInGrid_ctl02_btnDelete').click();
} else {
IsOk = false;
}
});
return false;
}


  还有一个小的提示点，在调用服务器控件的click事件时，用jquery的$(“id”).click()事件无法将页面提交到后台，只有用原生的js，document.getElementById(‘id’).click()的方式才会触发后台事件。至于为什么，下回见分晓。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  js jquery 重写confirm和alert .net 服务器控件
相关文章推荐
新的分享
章节导航