近期研究了阿里的bui框架,发现无论如何都没法在ajax里弹框点击那个确定按钮,这是bui的一大败笔啊!
后来经同事推荐使用了jquery自带的layer插件,果断换了,首先需要引入以下js代码:
<script type="text/javascript" src="/assets/js/jquery.form.js"></script>
<script type="text/javascript" src="/assets/js/tooltips.js"></script>
<script type="text/javascript" src="/assets/js/login.js"></script>
<script type="text/javascript" src="/assets/js/supersized.3.2.7.min.js"></script>
<script type="text/javascript" src="/assets/js/supersized-init.js"></script>
<script type="text/javascript" src="/assets/js/config.js"></script>
<script type="text/javascript" src="/assets/js/layer/layer.js"></script>
接着ajax这样写:
$('#login_form').ajaxSubmit(function(data) {
if(data.status){
//日期判断是否快到期了
var licens = (data.endTime-new Date().getTime())/(24*60*60*1000);
if(licens <= 7){
/*var str = "<span style='color: red;text-align: center'>许可证还剩</span>";
var s1 = "<span style='color: red;text-align: center'>天到期!</span>";
var ss =str + Math.round(licens);
var sa = ss+ s1;*/
var li = $("#li").val()+Math.round(licens)+$("#lis").val();
layer.open({
type: 1
,title: false //不显示标题栏
,closeBtn: false
,area: ['200px', '100px']
,shade: 0
,id: 'LAY_layuipro' //设定一个id,防止重复弹出
,btn: [$("#ok").val()]
,moveType: 1 //拖拽模式,0或者1
//设置的提示信息的样式
,content: '<div style="font-size:20px;font-weight:bold; color: red;text-align: center;">'+ li +'</div>'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
btn.css('text-align', 'center');
btn.find('.layui-layer-btn0').attr({
href: '/lang/index' //需要跳转的下个页面
,target: '_self' //在本窗口跳转
})
}
});
}else{
window.location.href='/lang/index';
}
} else {
show_err_msg(data.message);
}
});
<input id="li" type="hidden" value="<spring:message code="licensRemaining"> </spring:message>"/>
<input id="lis" type="hidden" value="<spring:message code="DayExpires!"></spring:message>"/>
<input type="hidden" id="ok" value="<spring:message code="ok"></spring:message>">
因为我们需要使用国际化,js里不能直接写,就通过隐藏域来显示:
还遇到个问题bui样式不能和bootstrap样式同时使用,就会冲突。