因为有时候浏览器自带的alert和confirm的样式太丑,或者在手机端经常显示地址,不符合我们的要求,所以我们就必须自定义一个alert框等,自定义alert的网址是:http://lab.seaning.com/_doc/API.html,需要从网上下载他的源码(http://download.csdn.net/download/fl_zxf/8498139),具体使用可以从网上搜一下。
我这里有个小例子:html代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<!-- 示例代码 -->
<script type="text/javascript" src="jquery-1.11.0.min.js"></script>
<script src="artDialog.source.js"></script>
<script src="iframeTools.source.js"></script>
<link href="skins/default.css" rel="stylesheet" />
<script type="text/javascript">
$(document).ready( function() {
$("#alert_button").click( function() {
var aa=document.getElementById("aa").value;
if(aa<100){
//jAlert('请输入大于100的数','警告');
art.dialog({ title: "提示", content: '请输入大于100的数' });
}
});
$("#confirm_button").click( function() {
//var a=jConfirm('你确定这么做吗?', '确定对话框'/*, /*function(r) {
//jAlert('是否确定: ' + r, '确定内容');
//}*/);
art.dialog({
content: '你确定这么做吗',
ok: function () {
//alert("aaa");
return true;
},
cancel: true
});
});
});
</script>
</head>
<body>
请输入金额:<input type="text" name="aa" id="aa">
<input type="submit" id="alert_button" value="提交"><br/><br/><br/><br/>
验证confirm:<input type="text" name="aa" id="aa">
<input type="submit" id="confirm_button" value="提交">
</body>
</html>
如果将此代码直接应用在本地的项目中,有时候可能会出现弹出框一闪而过的情况,那么如何解决呢?只针对于form表单提交的解决方法:
1、将submit改成了button,并且加一个onclick事件
<form id="cancleBtn" action="/member/o_cancel_member_follow.jspx" method="post" style="float:right">
<input type="button" οnclick="checkCancel()" value="终止" class="btn btn-lg btn-default" >
</form>
2、编写js代码,将所有的逻辑层次写清楚之后,然后用submit方法提交
<script>
function checkCancel(){
art.dialog({
content: '您确定要终止吗?',
ok: function () {
document.getElementById("cancleBtn").submit();
return false;
},
cancel:true
});
}
</script>
最终将问题解决了,不仅自定义了弹出框而且还实现了功能!