zoukankan      html  css  js  c++  java
  • javascript构造弹出div 并可关闭--待修改的

    /* 背景的大小还要好好研究一下。*/


    <div>
    <input type="button" value="点击按钮弹出Div" onClick="crAlert('测试效果');" />
    </div>

    <script type="text/javascript" language="javascript">

    function crAlert(str){
    var outDivWidth,outDivHeight,borderColor;
    outDivWidth=400;
    outDivHeight=200;
    borderColor="#336699";

    /*设置弹出Div后背景的属性*/
    var screenWidth,screenHeight;
    screenWidth=document.body.offsetWidth;
    screenHeight=screen.height;
    var bgObj=document.createElement("div");
    bgObj.setAttribute('id','bgDiv');
    bgObj.style.position="absolute";
    bgObj.style.background="#bebebe";
    bgObj.style.width=screenWidth + "px"
    bgObj.style.height=screenHeight + "px";
    bgObj.style.zIndex = "-1";
    document.body.appendChild(bgObj);

    /*设置弹出Div的相关属性*/
    var outDivObj=document.createElement("div")
    outDivObj.setAttribute("id","outDivDiv");
    outDivObj.setAttribute("align","center");
    outDivObj.style.background="white";
    outDivObj.style.border="1px solid " + borderColor;
    outDivObj.style.position = "absolute";
    outDivObj.style.left = "50%";
    outDivObj.style.top = "50%";
    outDivObj.style.marginLeft = "-200px" ;
    outDivObj.style.marginTop = -100+"px";
    outDivObj.style.font="14px '宋体'";
    outDivObj.style.fontWeight="bold";
    outDivObj.style.width = outDivWidth + "px";
    outDivObj.style.height =outDivHeight + "px";
    outDivObj.style.textAlign = "center";
    outDivObj.style.zIndex = "1";

    /*设置弹出Div的标题*/
    var title=document.createElement("p");
    title.setAttribute("id","outDivTitle");
    title.setAttribute("align","right");
    title.style.background=borderColor;???
    title.style.height="20px";
    title.style.font="12x '宋体'";
    title.style.color="#FFF";
    title.style.cursor="hand";
    title.innerHTML="关闭";

    document.body.appendChild(outDivObj);
    document.getElementById("outDivDiv").appendChild(title);??????
    var txt=document.createElement("p");
    txt.setAttribute("id","outDivTxt");
    txt.innerHTML=str;
    document.getElementById("outDivDiv").appendChild(txt);

    /*点击标题隐藏 背景层+弹出的Div+弹出Div上的Title*/
    title.onclick=function(){
    document.body.removeChild(bgObj);
    document.getElementById("outDivDiv").removeChild(title);
    document.body.removeChild(outDivObj);
    }??????????
    }
    </script>
  • 相关阅读:
    CSS自定义滚动条样式
    利用jquery和css打造个性化的单选框和复选框
    jQuery cookie 购物车及其实现
    php遍历数组 list foreach each方法总结
    css秘籍:复选框与文字对齐的问题
    Spring项目中的classpath路径
    idea快捷键盘Ctrl+H查看类的结构
    java中的反射机制(一)
    观察者设计模式
    Application context not configured for this file
  • 原文地址:https://www.cnblogs.com/crmhf/p/3823133.html
Copyright © 2011-2022 走看看