自定义Alert+自动关闭

发布时间:2020-01-24 03:33    浏览次数 :

[返回]

var ItemObj = undefined, scrollObj;
var PopupWin = function() {
    this.TimeOp = "";
    this.MoveSize = 0;
    this.MoveSpeedMax = 40;
    this.MoveSpeedMin = 5;
    this.MoveSpeed = this.MoveSpeedMax;
    this.MoveT = 37;
    this.Pianyi = 5;
    this.scrollSY = 0;
    this.MoveTime = 100;
    this.StartClose = 0;
    this.CloseTimeRun = 3000;
    this.PopObj = undefined;
    this.MinButton = undefined;
    this.MaxButton = undefined;
    this.CloseButton = undefined;
    this.MoveOp = "show"
}
PopupWin.prototype = {
    init: function() {
        this.create();
        this.setDefault();
        this.MoveSize = this.PopObj.clientHeight + this.Pianyi;
        ItemObj = this;
        this.TimeOp = setInterval("ItemObj.move()", this.MoveTime);
        this.scrollPop()
    },
    move: function() {
        var MoveMath = this.MoveOp == "show" ? this.ShowMoveSize(this.MoveSize) : this.MoveOp == "hide" ? this.HideMoveSize(this.MoveSize) : this.CloseMovesize();
        if (MoveMath > 0) {
            this.setPopTop(this.MoveStep((MoveMath - this.MoveSpeed) > 0 ? this.MoveSpeed: MoveMath))
        } else {
            clearInterval(this.TimeOp);
            this.scrollSY = this.MoveOp == "show" ? this.PopObj.clientHeight + this.Pianyi: this.screenH - this.getPopTop();
            this.MoveSpeed = this.MoveOp == "show" ? this.MoveSpeedMax: this.MoveSpeedMin;
            if (this.MoveOp == "close") {
                if (this.scrollSY <= 0) {
                    this.PopHide()
                } ! this.StartClose ? (setTimeout("StartCloseRun()", this.CloseTimeRun), this.StartClose = 1, this.scrollSY = this.MoveT + this.Pianyi) : this.StartClose = 1
            }
        }
    },
    MoveStep: function(MX) {
        return this.MoveOp == "show" ? this.getPopTop() - (MX) : this.getPopTop() + (MX)
    },
    ShowMoveSize: function(MX) {
        return MX - (this.screenH() - this.getPopTop())
    },
    HideMoveSize: function(MX) {
        return MX - (this.getPopTop() - (this.screenH() - this.PopObj.clientHeight + this.Pianyi))
    },
    CloseMoveSize: function() {
        return this.screenH() - this.getPopTop()
    },
    ShowSetMove: function() {},
    HidesetMove: function() {},
    ClosesetMove: function() {},
    PopShow: function() {
        this.PopObj.style.display = "block"
    },
    PopHide: function() {
        this.PopObj.style.display = "none"
    },
    setDefault: function() {
        this.setPopTop(this.screenH());
        this.PopShow()
    },
    setPopTop: function(Topsize) {
        this.PopObj.style.top = Topsize + "px"
    },
    getPopTop: function() {
        return parseInt(this.PopObj.style.top)
    },
    screenH: function() {
        return document.documentElement.scrollTop + document.documentElement.clientHeight
    },
    setAbs: function() {
        scrollObj.setPopTop(scrollObj.screenH() - scrollObj.scrollSY)
    },
    scrollPop: function() {
        scrollObj = this;
        if (window.attachEvent) {
            window.attachEvent("onscroll", scrollObj.setAbs)
        } else {
            window.addEventListener("scroll", scrollObj.setAbs, false)
        }
    },
    DomEvent: function() {},
    create: function() {
        this.PopObj = document.createElement("div");
        this.PopObj = this.setAttr(this.PopObj, ["id", "style"], ["PopUp", "position:absolute; display:none; top:0px; right:0px; width:280px; height:300px; border:1px #000 solid;"]);
        this.PopObj.innerHTML = '<a href="#" id="MinBtn" style=" position:absolute; top:12px; right:28px; width:0; overflow:hidden;background:url(images/pop_btn.gif) no-repeat;height:15px; padding-left:15px;" title="最小化">最小化</a><a href="#" style=" display:none; position:absolute; top:12px; right:28px; overflow:hidden;background:url(images/pop_btn.gif) no-repeat -15px 0;height:15px; width:0; padding-left:15px;" title="还原" id="MaxBtn">还原</a><a href="#" style=" position:absolute; top:12px; right:8px; overflow:hidden;background:url(images/pop_btn.gif) no-repeat -30px 0; width:0; height:15px; padding-left:15px;" id="CloseBtn" title="关闭">关闭</a><div class="popupc" id="PopFrm"></div>';
        document.body.appendChild(this.PopObj);
        this.MinButton = document.getElementById("MinBtn");
        this.MaxButton = document.getElementById("MaxBtn");
        this.CloseButton = document.getElementById("CloseBtn")
    },
    setAttr: function(Obj, Attr, Attrval) {
        for (var i = 0; i < Attr.length; i++) {
            if (Attr[i] != "style") {
                if (Attr[i] == "class") {
                    Obj.setAttribute("className", Attrval[i]);
                    Obj.setAttribute("class", Attrval[i])
                } else {
                    Obj.setAttribute(Attr[i], Attrval[i])
                }
            } else {
                var oStyle = Obj.getAttribute("style");
                if (oStyle == "[object]") {
                    oStyle.setAttribute("cssText", Attrval[i]);
                    Obj.setAttribute("style", oStyle)
                } else {
                    Obj.setAttribute("style", Attrval[i])
                }
            }
        }
        return Obj
    }
}

<html>
<head>
<style type="text/css">
#alertMsg {
display: none;
width: 400px;
border: 1px solid #ddd;
border-radius: 5px;
box-shadow: 1px 1px 10px black;
padding: 10px;
font-size: 12px;
position: absolute;
text-align: center;
background: #fff;
z-index: 100000;
}

#alertMsg_info {
padding: 2px 15px;
line-height: 1.6em;
text-align: left;
}

#alertMsg_btn1, #alertMsg_btn2 {
display: inline-block;
background: url(images/gray_btn.png) no-repeat left top;
padding-left: 3px;
color: #000000;
font-size: 12px;
text-decoration: none;
margin-right: 10px;
cursor: pointer;
}

#alertMsg_btn1 cite, #alertMsg_btn2 cite {
line-height: 24px;
display: inline-block;
padding: 0 13px 0 10px;
background: url(images/gray_btn.png) no-repeat right top;
font-style: normal;
}
</style>
</head>
<body>
<script>
function alertMsg(msg, mode, hiddenTime) { //mode为空,即只有一个确认按钮,mode为1时有确认和取消两个按钮
msg = msg || '';
mode = mode || 0;
var top = document.body.scrollTop || document.documentElement.scrollTop;
var isIe = (document.all) ? true : false;
var isIE6 = isIe && !window.XMLHttpRequest;
var sTop = document.documentElement.scrollTop || document.body.scrollTop;
var sLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
var winSize = function () {
var xScroll, yScroll, windowWidth, windowHeight, pageWidth, pageHeight;
// innerHeight获取的是可视窗口的高度,IE不支持此属性
if (window.innerHeight && window.scrollMaxY) {
xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
} else if (document.body.scrollHeight > document.body.offsetHeight) { // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
} else { // Explorer Mac...would also work in Explorer 6 Strict, Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
}

if (self.innerHeight) { // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
} else if (document.documentElement && document.documentElement.clientHeight) { // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
} else if (document.body) { // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
}

下一篇:没有了