js简单实现遮罩层

来源：互联网发布：出售淘宝买家信息编辑：程序博客网时间：2024/06/04 23:19

做的妙味的一个课后作业：比较笨的js,不过遮罩层很好实现

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>热身课后练习1</title>    <link rel="stylesheet" type="text/css" href="afterClass.css"></head><body><div id="bar">    <h1>请为下面的DIV设置样式：</h1>    <h3 id="h3">点击设置</h3></div><div id="box" class="box"></div><div class="bg" id="bg"></div><div id="center_box" class="center_box">    <div>        <ul>            <li id="li1">                <strong>请选择背景色：</strong>                <div class="color_box"></div>                <div class="color_box"></div>                <div class="color_box"></div>            </li>            <li id="li2">                <strong>请选择宽度：&nbsp;&nbsp;&nbsp;</strong>                <div class="color_box">200px</div>                <div class="color_box">300px</div>                <div class="color_box">400px</div>            </li>            <li id="li3" style="margin: 0;">                <strong>请选择高度：&nbsp;&nbsp;&nbsp;</strong>                <div class="color_box">200px</div>                <div class="color_box">300px</div>                <div class="color_box">400px</div>            </li>        </ul>    </div>    <div>        <input id="reset" type="button" value="恢复" onclick="resetx()">        <input id="submit" type="button" value="确定" onclick="submitx()">    </div></div><script>    var box=document.getElementById("box");    var center_box=document.getElementById("center_box");    var h3=document.getElementById("h3");    var bg=document.getElementById("bg");//    var small_box=document.getElementById("li1").getElementsByTagName("div");    var small_box=document.getElementsByClassName("color_box");    small_box[0].onclick=function () {        box.style.backgroundColor="red";    } ;    small_box[1].onclick=function () {        box.style.backgroundColor="yellow";    }  ;    small_box[2].onclick=function () {        box.style.backgroundColor="blue";    } ;    small_box[3].onclick=function () {        box.style.width="200px";    } ;    small_box[4].onclick=function () {        box.style.width="300px";    } ;    small_box[5].onclick=function () {        box.style.width="400px";    } ;    small_box[6].onclick=function () {        box.style.height="200px";    } ;    small_box[7].onclick=function () {        box.style.height="300px";    } ;    small_box[8].onclick=function () {        box.style.height="400px";    } ;    var reset=document.getElementById("reset");    var submit=document.getElementById("submit");    function resetx() {        box.style.backgroundColor="gray";        box.style.width="200px";        box.style.height="200px";    }    function submitx() {        center_box.style.display="none";        bg.style.display="none";    }    h3.onclick=function () {        center_box.style.display="block";        bg.style.display="block";    }</script></body></html>

/**{*/    /*margin: 0;*/    /*padding: 0;*//*}*/#bar{    /*float: left;*/    height: 50px;}h1,h3{    margin: 0;    padding: 0;    height:50px;    line-height:50px;    /*text-align: center;*/    float: left;}.box{    float: left;    background: gray;    width:200px;    height: 200px;    border:1px black solid;}.bg{    position: absolute;    width: 100%;    height: 100%;    z-index: 1;    opacity:0.5;    background-color: black;    display: none;}.center_box{    position: absolute;    left: 400px;    top: 60px;    float: left;    margin-left: 20px;    border: solid darkgray 15px;    text-align: center;    width: 300px;    height: 200px;    background: white;    display: none;    z-index: 2;}.center_box ul{    /*margin: 0;*/    padding: 0;    margin-left: 20px;}.center_box ul>li{    text-align: left;    /*width: 40%;*/    padding: 0;    margin-bottom:20px;    height: 30px;    line-height:30px;}.center_box input{    background: cadetblue;}.center_box strong{    float: left;    height: 30px;    line-height:30px;}.center_box ul{    float: left;}.color_box{    width: 30px;    height: 30px;    float: left;    /*background: #000;*/    line-height:30px;    margin-left: 10px;    font-size:10px;}.color_box:nth-of-type(1){    background: red;}.color_box:nth-of-type(2){    background: yellow;}.color_box:nth-of-type(3){    background: blue;}.center_box ul li:nth-of-type(2) .color_box{    background: darkgray;}.center_box ul li:nth-of-type(3) .color_box{    background: darkgray;}.center_box input{    width: 50px;    /*float: left;*/}

阅读全文

0 0