模态弹出框

最新推荐文章于 2024-01-19 09:00:51 发布

荡漾-

最新推荐文章于 2024-01-19 09:00:51 发布

阅读量726

点赞数

分类专栏： javaScript

javaScript 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

 
 http://www.runoob.com/try/try.php?filename=trycss_buttons_color 

 
 这个地址是按钮的css样式，可以进行模态弹出窗的按钮进行设置 

 
 弹出框 

<div id="envon" style=" width:300px;height: 50px; background-color:#FFFFFF; border:1px solid #000000; padding:20px; overflow:hidden; display:none;">

 /* EV_modeAlert('envon')*/弹出

//用来记录要显示的DIV的ID值
var EV_MsgBox_ID=""; //重要

//弹出对话窗口(msgID-要显示的div的id)
function EV_modeAlert(msgID){
    //创建大大的背景框
    var bgObj=document.createElement("div");
    bgObj.setAttribute('id','EV_bgModeAlertDiv');
    document.body.appendChild(bgObj);
    //背景框满窗口显示
    EV_Show_bgDiv();
    //把要显示的div居中显示
    EV_MsgBox_ID=msgID;
    EV_Show_msgDiv();
}

//关闭对话窗口
function EV_closeAlert(){
    var msgObj=document.getElementById(EV_MsgBox_ID);
    var bgObj=document.getElementById("EV_bgModeAlertDiv");
    msgObj.style.display="none";
    document.body.removeChild(bgObj);
    EV_MsgBox_ID="";
}

//窗口大小改变时更正显示大小和位置
window.onresize=function(){
    if (EV_MsgBox_ID.length>0){
        EV_Show_bgDiv();
        EV_Show_msgDiv();
    }
}

//窗口滚动条拖动时更正显示大小和位置
window.onscroll=function(){
    if (EV_MsgBox_ID.length>0){
        EV_Show_bgDiv();
        EV_Show_msgDiv();
    }
}

//把要显示的div居中显示
function EV_Show_msgDiv(){
    var msgObj   = document.getElementById(EV_MsgBox_ID);
    msgObj.style.display  = "block";
    var msgWidth = msgObj.scrollWidth;
    var msgHeight= msgObj.scrollHeight;
    var bgTop=EV_myScrollTop();
    var bgLeft=EV_myScrollLeft();
    var bgWidth=EV_myClientWidth();
    var bgHeight=EV_myClientHeight();
    var msgTop=bgTop+Math.round((bgHeight-msgHeight)/2);
    var msgLeft=bgLeft+Math.round((bgWidth-msgWidth)/2);
    msgObj.style.position = "absolute";
    msgObj.style.top      = msgTop+"px";
    msgObj.style.left     = msgLeft+"px";
    msgObj.style.zIndex   = "10001";

}
//背景框满窗口显示
function EV_Show_bgDiv(){
    var bgObj=document.getElementById("EV_bgModeAlertDiv");
    var bgWidth=EV_myClientWidth();
    var bgHeight=EV_myClientHeight();
    var bgTop=EV_myScrollTop();
    var bgLeft=EV_myScrollLeft();
    bgObj.style.position   = "absolute";
    bgObj.style.top        = bgTop+"px";
    bgObj.style.left       = bgLeft+"px";
    bgObj.style.width      = bgWidth + "px";
    bgObj.style.height     = bgHeight + "px";
    bgObj.style.zIndex     = "10000";
    bgObj.style.background = "#777";
    bgObj.style.filter     = "progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=60,finishOpacity=60);";
    bgObj.style.opacity    = "0.6";
}
//网页被卷去的上高度
function EV_myScrollTop(){
    var n=window.pageYOffset
        || document.documentElement.scrollTop
        || document.body.scrollTop || 0;
    return n;
}
//网页被卷去的左宽度
function EV_myScrollLeft(){
    var n=window.pageXOffset
        || document.documentElement.scrollLeft
        || document.body.scrollLeft || 0;
    return n;
}
//网页可见区域宽
function EV_myClientWidth(){
    var n=document.documentElement.clientWidth
        || document.body.clientWidth || 0;
    return n;
}
//网页可见区域高
function EV_myClientHeight(){
    var n=document.documentElement.clientHeight
        || document.body.clientHeight || 0;
    return n;
}