lyjalerts alerts提示框

lyjalerts.js

$(document).ready(function () {    
    // 插入容器
    var content = '<!-- 警告框容器 --><div id="lyjwarning" class="lyj-topright"></div><!-- 警告框容器 -->';
    $('body').prepend(content);
    // lyjwarning("开始啊。。。");
});
 
// 警告框
function lyjalert(str,type){
    var my = 'lyj' + _getRandomString(5) ;         
    // console.info(my);
 
    // 
    var msghtml = '';
    
    switch(type){ 
        case 1: 
            // 警告框
            msghtml = '<div class="alert alert-warning lyj-alerts '+my+'" >'+str+'</div>'; 
            break; 
        case 2: 
            // 信息框
            msghtml = '<div class="alert alert-info lyj-alerts '+my+'" >'+str+'</div>'; 
            break;
        case 3: 
            // 成功框
            msghtml = '<div class="alert alert-success lyj-alerts '+my+'" >'+str+'</div>'; 
            break;
        case 4: 
            // 错误框
            msghtml = '<div class="alert alert-danger lyj-alerts '+my+'" >'+str+'</div>'; 
            break;
        default: 
            msghtml = '<div class="alert alert-warning lyj-alerts '+my+'" >'+str+'</div>';
    }     
    
    $("#lyjwarning").append(msghtml);
     
    my = "#lyjwarning ."+my;
    // 延时淡出 并删除
    $(my).fadeOut(3500, function(){$(this).remove();});
    // $(my).delay(1500).fadeOut(2000, function(){$(this).remove();});
}
 
// 获取长度为len的随机字符串
function _getRandomString(len) {
    len = len || 32;
    var $chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'; // 默认去掉了容易混淆的字符oOLl,9gq,Vv,Uu,I1
    var maxPos = $chars.length;
    var pwd = '';
    for (i = 0; i < len; i++) {
        pwd += $chars.charAt(Math.floor(Math.random() * maxPos));
    }
    return pwd;
}

lyjalerts.css

/* 超小屏幕（手机，小于 768px） */
@media (max-width:768px) {
  .lyj-topright {
    right:20%;
    position:fixed;
    top:0;
    width:60%;
    height:10px;
    z-index:999999999;
  }
}
 
/* 小屏幕（平板，大于等于 768px） */
@media (min-width:768px) and (max-width:992px) {
  .lyj-topright {
    right:0;
    position:fixed;
    top:0;
    width:30%;
    height:10px;
    z-index:999999999;
  }
}
 
/* 中等屏幕（桌面显示器，大于等于 992px） */
@media (min-width:992px) and (max-width:1200px) {
  .lyj-topright {
    right:0;
    position:fixed;
    top:0;
    width:30%;
    height:10px;
    z-index:999999999;
  }
}
 
/* 大屏幕（大桌面显示器，大于等于 1200px） */
@media (min-width:1200px) {
  .lyj-topright {
    right:0;
    position:fixed;
    top:0;
    width:30%;
    height:10px;
    z-index:999999999;
  }
}
 
.lyj-alerts {
  position:relative;
  margin:2px 2px 8px 0px;
}
.alert-success {
  color:#3c763d;
  background-color:#dff0d8;
  border-color:#d6e9c6;
}
.alert-success hr {
  border-top-color:#c9e2b3;
}
.alert-success .alert-link {
  color:#2b542c;
}
.alert-info {
  color:#31708f;
  background-color:#d9edf7;
  border-color:#bce8f1;
}
.alert-info hr {
  border-top-color:#a6e1ec;
}
.alert-info .alert-link {
  color:#245269;
}
.alert-warning {
  color:#8a6d3b;
  background-color:#fcf8e3;
  border-color:#faebcc;
}
.alert-warning hr {
  border-top-color:#f7e1b5;
}
.alert-warning .alert-link {
  color:#66512c;
}
.alert-danger {
  color:#a94442;
  background-color:#f2dede;
  border-color:#ebccd1;
}
.alert-danger hr {
  border-top-color:#e4b9c0;
}
.alert-danger .alert-link {
  color:#843534;
}
.alert {
  padding:15px;
  margin-bottom:20px;
  border:1px solid transparent;
  border-radius:4px;
}
.alert h4 {
  margin-top:0;
  color:inherit;
}
.alert .alert-link {
  font-weight:bold;
}
.alert > p,.alert > ul {
  margin-bottom:0;
}
.alert > p + p {
  margin-top:5px;
}