js網(wǎng)頁右下角提示框?qū)嵗?/h1>

 更新時間：2014年10月14日 10:38:18   投稿：shichen2014  

這篇文章主要介紹了js網(wǎng)頁右下角提示框的實現(xiàn)方法,以實例展示了css樣式與HTML布局,以及對應(yīng)的js顯示與關(guān)閉提示框等功能,需要的朋友可以參考下

本文實例講述了js網(wǎng)頁右下角提示框的實現(xiàn)方法，分享給大家供大家參考。具體方法如下：

html代碼部分如下：

復(fù)制代碼 代碼如下:

<style type="text/css">
.messageTip{border-right: #455690 1px solid; border-top: #a6b4cf 1px solid; border-left: #a6b4cf 1px solid; border-bottom: #455690 1px solid; z-index:99999; left: 0px; top: 0px; visibility:hidden; width: 230px; position: absolute; background:#cfdef4; text-align:left}
.messageTip .close{position:absolute; right:0px; font-weight:bold; padding:4px 4px 0 0;}
.messageTip .close a{color:red;font-size:12px; text-decoration:none;}
.messageTip .content{border-top: #ffffff 1px solid; border-left: #ffffff 1px solid}
.messageTip .content .title{color: #1f336b; padding-top: 4px;padding-left: 4px; height:22px;}
.messageTip .content .msg{border-right: #b9c9ef 1px solid;border-left: #728eb8 1px solid; border-top: #728eb8 1px solid; padding:10px; margin:1px}
</style>

<script type="text/javascript" src="/js/base.js"></script>
<div id="eMeng" class="messageTip">
    <div class="close"><a href="javascript:msgTip.close();" title="關(guān)閉">×</a></div>
    <div class="content">
        <div class="title">系統(tǒng)提示：</div>
        <div class="msg">
        內(nèi)容
        </div>
    </div>
</div>

js代碼部分如下：

復(fù)制代碼 代碼如下:

function messageTip(pJso) {
    _.init(this, pJso, {
        name: 'msg'//提示框標簽ID
    });
    this.eMsg = document.getElementById(this.name);
}

messageTip.prototype =
{
    //提示框始終在最右下角
    rePosition: function(_this) {
        var divHeight = parseInt(_this.eMsg.offsetHeight, 10);
        var divWidth = parseInt(_this.eMsg.offsetWidth, 10);
        var docWidth = document.body.clientWidth;
        var docHeight = document.body.clientHeight;
        _this.eMsg.style.top = docHeight - divHeight + parseInt(document.body.scrollTop, 10);
        _this.eMsg.style.left = docWidth - divWidth + parseInt(document.body.scrollLeft, 10);
    },

    //提示框慢慢往上升
    moveDiv: function(_this) {
        /*
        這里可以設(shè)置自動幾秒后關(guān)閉
        ...
        */
        try {
            if (parseInt(_this.eMsg.style.top, 10) <= (_this.docHeight - _this.divHeight + parseInt(document.body.scrollTop, 10))) {
                window.clearInterval(_this.objTimer);
                _this.objTimer = window.setInterval(function() { _this.rePosition(_this); }, 1);
            }
            _this.divTop = parseInt(_this.eMsg.style.top, 10);
            _this.eMsg.style.top = _this.divTop - 1;
        }
        catch (e) {
        }
    },
   
    //關(guān)閉提示框
    close: function() {
        this.eMsg.style.visibility = 'hidden';
        if (this.objTimer) window.clearInterval(this.objTimer);
    },

    //顯示提示框
    show: function() {
        var divTop = parseInt(this.eMsg.style.top, 10);
        this.divTop = divTop;
        var divLeft = parseInt(this.eMsg.style.left, 10);

        var divHeight = parseInt(this.eMsg.offsetHeight, 10);
        this.divHeight = divHeight;

        var divWidth = parseInt(this.eMsg.offsetWidth, 10);
        var docWidth = document.body.clientWidth;
        var docHeight = document.body.clientHeight;
        this.docHeight = docHeight;

        this.eMsg.style.top = parseInt(document.body.scrollTop, 10) + docHeight + 10;
        this.eMsg.style.left = parseInt(document.body.scrollLeft, 10) + docWidth - divWidth;
        this.eMsg.style.visibility = "visible";

        var _this = this;
        this.objTimer = window.setInterval(function() { _this.moveDiv(_this); }, 10);
    }
}

var msgTip = new messageTip({ name: 'eMeng' });
window.onload = function() { msgTip.show(); };
window.onresize = function() { msgTip.rePosition(msgTip); };

希望本文所述對大家的web程序設(shè)計有所幫助。

您可能感興趣的文章:

• js實現(xiàn)右下角窗口彈出窗口效果
• js右下角彈出窗口,點擊可關(guān)閉效果
• Js右下角視頻廣告代碼(百度視窗)
• JS模仿MSN右下角彈出提示框代碼
• 兼容性非常好的js右下角與漂浮廣告代碼
• js右下角與漂浮廣告代碼(兼容多瀏覽器)
• 頁面右下角彈出提示框示例代碼js版
• js實現(xiàn)右下角提示框的方法
• js右下角彈出提示框示例代碼

• js
• 網(wǎng)頁
• 提示框

相關(guān)文章

• 

  form.submit()不能提交表單的原因分析

  這篇文章主要分析了form.submit()不能提交表單的原因,需要的朋友可以參考下

  2014-10-10
• 

  BootStrap與validator 使用筆記(JAVA SpringMVC實現(xiàn))

  這篇文章主要介紹了BootStrap與validator 使用筆記(JAVA SpringMVC實現(xiàn))的相關(guān)資料,非常不錯，具有參考借鑒價值，需要的朋友可以參考下

  2016-09-09
• 

  javascript加載導(dǎo)出3mf文件

  3MF是一種開放標準的文件格式,專門用于三維制造和打印,這篇文章主要介紹了如何使用JavaScript實現(xiàn)加載導(dǎo)出3mf文件,感興趣的可以了解下

  2024-11-11
• 

  在WordPress中加入Google搜索功能的簡單步驟講解

  這篇文章主要介紹了在WordPress中加入Google搜索的簡單步驟講解,谷歌搜索很有用,但同時也要注意在國內(nèi)使用cse的連通性,需要的朋友可以參考下

  2016-01-01
• 

  javascript一點特殊用法

  javascript中函數(shù)的特殊性與普通，對待函數(shù)可以像對待普通變量一樣

  2008-05-05
• 

  不要在cookie中使用特殊字符的原因分析

  參數(shù)name需要遵循規(guī)范RFC2109，也就是說name參數(shù)只能包含字母或者數(shù)字，不能包含逗號、分號、空格及美元符號。cookie的name屬性設(shè)置之后不能被修改。

  2010-07-07
• 

  第九章之路徑分頁標簽與徽章組件

  Bootstrap，來自 Twitter，是目前最受歡迎的前端框架。本文給大家介紹路徑分頁標簽與徽章組件，感興趣的朋友一起學(xué)習(xí)吧

  2016-04-04
• 

  JavaScript中null與undefined分析

  JavaScript null undefined分析

  2009-07-07
• 

  JS面試必備之如何實現(xiàn)一個精確的倒計時

  又到了金三銀四的季節(jié)了,面試的各位同學(xué)要開始準備起來了,今天主要分享一個在面試中經(jīng)常被提到的一個面試題：倒計時,希望對大家有所幫助

  2024-03-03
• 

  基于cornerstone.js的dicom醫(yī)學(xué)影像查看瀏覽功能

  這篇文章主要介紹了基于cornerstone.js的dicom醫(yī)學(xué)影像查看瀏覽功能,本文通過實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下

  2022-07-07

最新評論