zoukankan      html  css  js  c++  java
  • js弹出层

    <html>

    </head>
    <body>
    <a href="1.htm" onmouseover="sAlert('hello');" >Hi move here</a>
    <script type="text/javascript" language="javascript">
    function sAlert(str) {
    var msgw, msgh, bordercolor;
    msgw = 400; //Width
    msgh = 100; //Height
    titleheight = 25 //title Height
    bordercolor = "#336699"; //boder color
    titlecolor = "#99CCFF"; //title color
    var sWidth, sHeight;
    sWidth = document.body.offsetWidth;
    sHeight = screen.height;
    var bgObj = document.createElement("div");
    bgObj.setAttribute('id', 'bgDiv');
    bgObj.style.position = "absolute";
    bgObj.style.top = "0";
    bgObj.style.background = "#777";
    bgObj.style.filter = "progid:DXImageTransform.Microsoft.Alpha(style=3,opacity=25,finishOpacity=75";
    bgObj.style.opacity = "0.6";
    bgObj.style.left = "0";
    bgObj.style.width = sWidth + "px";
    bgObj.style.height = sHeight + "px";
    bgObj.style.zIndex = "10000";
    document.body.appendChild(bgObj);
    var msgObj = document.createElement("div")
    msgObj.setAttribute("id", "msgDiv");
    msgObj.setAttribute("align", "center");
    msgObj.style.background = "white";
    msgObj.style.border = "1px solid " + bordercolor;
    msgObj.style.position = "absolute";
    msgObj.style.left = "50%";
    msgObj.style.top = "50%";
    msgObj.style.font = "12px/1.6em Verdana, Geneva, Arial, Helvetica, sans-serif";
    msgObj.style.marginLeft = "-225px";
    msgObj.style.marginTop = -75 + document.documentElement.scrollTop + "px";
    msgObj.style.width = msgw + "px";
    msgObj.style.height = msgh + "px";
    msgObj.style.textAlign = "center";
    msgObj.style.lineHeight = "25px";
    msgObj.style.zIndex = "10001";
    var title = document.createElement("h4");
    title.setAttribute("id", "msgTitle");
    title.setAttribute("align", "right");
    title.style.margin = "0";
    title.style.padding = "3px";
    title.style.background = bordercolor;
    title.style.filter = "progid:DXImageTransform.Microsoft.Alpha(startX=20, startY=20, finishX=100, finishY=100,style=1,opacity=75,finishOpacity=100);";
    title.style.opacity = "0.75";
    title.style.border = "1px solid " + bordercolor;
    title.style.height = "18px";
    title.style.font = "12px Verdana, Geneva, Arial, Helvetica, sans-serif";
    title.style.color = "white";
    title.style.cursor = "pointer";
    title.innerHTML = "Close";
    title.onclick = function() {
    document.body.removeChild(bgObj);
    document.getElementById("msgDiv").removeChild(title);
    document.body.removeChild(msgObj);
    }
    document.body.appendChild(msgObj);
    document.getElementById("msgDiv").appendChild(title);
    var txt = document.createElement("div"); //改动div
    txt.style.height = "355px";
    txt.style.display = "block";
    txt.style.cursor = "pointer";
    txt.setAttribute("id", "GoogleMapComponent");
    txt.setAttribute("marker", "1");
    txt.setAttribute("popup", "1");
    txt.setAttribute("control", "small");
    document.getElementById("msgDiv").appendChild(txt);
    }
    </script>
    </body>
    </html>

  • 相关阅读:
    Sort
    RAID
    LeetCode总结 -- 一维动态规划篇
    Count and Say
    Dynamic Programming Introduction
    Mongodb与Redis应用指标对比
    精通有状态vs无状态(Stateful vs Stateless)—Immutable模式之姐妹篇
    Windows 安装 pytorch3d
    GitHub 图片无法显示 或 gist 无法访问
    LaTeX符号表,数学公式速查必备
  • 原文地址:https://www.cnblogs.com/gcb999/p/2719556.html
Copyright © 2011-2022 走看看