css-模态对话框的制作

代码地址：

https://cloud.189.cn/t/VVZr2qqYriey (0817-蒙态框)

》遮罩层的样式范例

》白色区域的样式

自定义一个蒙态对话框

• 先做出框架

两个盒子，一个做庶罩层，一个做信息层

》写样式，先让庶罩层生效

.mod{
    position: fixed;
    left:0;
    right: 0;
    top:0;
    bottom:0;
    /*background-color: black;*/
    /*opacity:0.3;*/
    background-color: rgba(0,0,0,0.3);
}

模态框遮罩层，几个要素

1，固顶定位
2，上下左位的位置设置为0
3，背景颜色和不透明度

html同时再添加一个按钮

效果

这时的状态

因为庶罩层固顶定位了

所以它浮在文档流的上空

文档后面的东西点不到

比如按钮就点不到

哪怕，把它的不透明度调整为0，让它完全透明

后面的也点不到

• 如何让按钮可以被点击到？

除非让这一层消失才可以

》写样式，让信息框出现

阶段一

.info{
    position:fixed;
    width: 400px;
    height: 300px;
    background-color: white;
    left:50%;
    top:50%;
}

未居中

预期效果

用margin调一下

向上，向左，偏移一下，偏移的位置与宽高有关

.info{
    position:fixed;
    width: 400px;
    height: 300px;
    background-color: white;
    left:50%;
    top:50%;
    margin-left: -200px;
    margin-top: -150px;
}

》让信息区有一个表单出来

用一个容器包一些表单控件

代码中的点

1，label包input有什么效果？ 它与什么效果相同

2，当前表单点击提交后是什么效果？为什么？

》调一下位置

• 让表单位置居中

让容器有个颜色作为参考

调整位置

去掉底色