html5 css3 jquery js设置某个div显示时,其他不可编辑?（自定义弹出层）如何实现？

html-css016

html5 css3 jquery js设置某个div显示时,其他不可编辑?（自定义弹出层）如何实现？,第1张

大致可以这样子做：

.Dialog{position: absolutetop:0left:0background: #fffborder:1px solid #ddd

    -moz-border-radius:5px-webkit-border-radius:5pxborder-radius:5px

    box-shadow: 0 0 5px 5px rgba(100, 100, 100, 0.1)

    padding:0 10px

    z-index: 99

}/*弹出层*/

/*弹出层遮罩*/

.Dialog-make{width:100%height:100%filter:alpha(opacity=5)opacity:.05position:absolutetop:0left:0z-index:98background:#000}

.Dialog-make iframe{width:100%height:100%filter:alpha(opacity=0)opacity:0border:0px}

当.Dialog层显示时，.Dialog-make层也显示，Dialog-make的z-index少于Dialog的z-index.那么就在Dialog下行成遮罩层，当前也只能操作Dialog层内的东西了

需要准备的材料分别有：电脑、浏览器、html编辑器。

1、首先，打开html编辑器，新建html文件，例如：index.html。

2、在index.html中的<style>标签中，输入css代码：

div{width: 300pxheight: 150pxborder: 3px solid blueborder-radius: 0 0 30px 30pxbox-shadow: 0 7px 7px -7px #5E5E5E}

3、浏览器运行index.html页面，此时实现了div只有底部有圆角和阴影效果。