遮罩层

最新推荐文章于 2023-12-01 14:40:02 发布

beinlife

最新推荐文章于 2023-12-01 14:40:02 发布

阅读量477

点赞数

分类专栏： javaScript

本文链接：https://blog.csdn.net/beinlife/article/details/72620931

版权

javaScript 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

 <head>

  <title> New Document </title>

  <meta name="Generator" content="EditPlus">

  <meta name="Author" content="">

  <meta name="Keywords" content="">

  <meta name="Description" content="">

  <script src="jquery-1.8.3.min.js"></script>

 </head>

 <style>

.edit{

  position: relative;

  left:10px;

  top:20px;

  width: 300px;

  height:350px;

  border: 1px solid #ccc;

  background: #FFF;

    text-align: center;

  z-index:0;

  display:block;

}

.edit input{

 text-align: center;

}

.jr{

 border:0px;

}

#zc533,#zc533d{

 display:inline-block;

 border:1px solid #ccc;

 width:70px;

 margin-left:12px;

}

.wr{

 border-radius:5px;

 width:80px;

}

.edit_sub button{

 width:60px;

 height:35px;

 border-radius:10px;

 background-color:#007aff;

 border-color:#007aff;

 color:#fff;

 margin:0px 10px 0px 10px;

}

.mask {       

        position: absolute;

        top: 0px;

        left: 0px;

        background-color: #777;    

        z-index: 1002;  

        opacity:0.1;    

}  

 </style>

 <body>

        <div id="mask" class="mask"></div>    

        <button  onclick="showMask()" >点我显示遮罩层</button><br />



        <div class="edit">

            <p>注塑转储退料修改页面</p>

            <p>料号：<input id='lh' class='jr' value='' readonly='readonly'/></p>

            <p>品名：<input id='pm' class='jr' value='' readonly='readonly'/></p>

            <p>转出：<span id='zc533'>533</span><span id='zc533d'>533D</span></p>

            <p>数量：<input id='sl' class='wr' value=''/> 旧：<span id='jsl'>100000</span></p>

            <p>栈板：<input id='zb' class='wr' value=''/> 旧：<span id='jzb'>100000</span></p>

            <p>转入：<input id='zr' class='wr' value=''/> 旧：<span id='jzr'>100000</span></p>

            <div class='edit_sub'>

                <button onclick="javascript:alert('取消');">取消</button>

                <button onclick="javascript:alert('删除');">删除</button>

                <button onclick="javascript:alert('确认');">确认</button>

            </div>

        </div>

        <div class="edit">

            <p>注塑转储退料修改页面</p>

            <p>料号：<input id='lh' class='jr' value='' readonly='readonly'/></p>

            <p>品名：<input id='pm' class='jr' value='' readonly='readonly'/></p>

            <p>转出：<span id='zc533'>533</span><span id='zc533d'>533D</span></p>

            <p>数量：<input id='sl' class='wr' value=''/> 旧：<span id='jsl'>100000</span></p>

            <p>栈板：<input id='zb' class='wr' value=''/> 旧：<span id='jzb'>100000</span></p>

            <p>转入：<input id='zr' class='wr' value=''/> 旧：<span id='jzr'>100000</span></p>

            <div class='edit_sub'>

                <button onclick="javascript:alert('取消');">取消</button>

                <button onclick="javascript:alert('删除');">删除</button>

                <button onclick="javascript:alert('确认');">确认</button>

            </div>

        </div>

        <script type="text/javascript">     

    //兼容火狐、IE8   

    //显示遮罩层    

    function showMask(){     

        $("#mask").css("height",$(document).height());     

        $("#mask").css("width",$(document).width());     

        $("#mask").show();     

    }  

    //隐藏遮罩层  

    function hideMask(){ 

        $("#mask").hide();     

    }

</script>

 </body>

</html>