右下角提示框

這是在bootstrap上修改的需要引入bootstrap不多說直接上代碼

1.HTML

<div id="pop" class="panel panel-default pop" hidden>
    <div id="popHead" class="popHead">
        <a class="popClose" title="關閉" οnclick="closePop()">關閉</a>
        <span></span>
    </div>
    <div id="popTxt" class="popContext"></div>
</div>
2.css樣式

.pop{position: fixed;right:10px;bottom:10px;box-shadow: 0 5px 15px rgba(0,0,0,.5);}
.popHead{background:#fff;width:260px;border:1px solid #e0e0e0;font-size:14px;padding: 10px;}
.popClose{float: right;color: #f25656;}
.popHead span{font-size: 15px;}
.popContext{height: 80px;padding: 15px;}

3.js文件

function pop(title,text,time){

    if(title==undefined)
        title = "消息提示";

    if(text==undefined)
        text = "修改成功";

    if(time==undefined)
        time = 2000;


    $("#popHead span").html(title);
    $("#popTxt").html(text);

    $("#pop").show(100,"linear",function(){
        setTimeout("closePop()",time);
    });
}

function closePop(){
    $("#pop").hide();
}
4.引用方式

success:function(data){
    if(data.success){ 
        pop("標題","內容",提示框存在的時間(單位毫秒));
    }
}
5.說明

pop(title,text,time)該方法有三個參數,分別代表標題,內容,和提示框存在的時間!
參數默認是“消息提示”“修改成功”,2000
time單位爲毫秒,time毫秒後提示框消失。





發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章