遮罩层的制作

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title><style>.modal{background: black;position:fixed;left:0;top:0;right:0;bottom:0;opacity: 0.4;}</style>
</head>
<body><input type="button" value="显示">
<div class="modal">1</div>
<div class="info">2</div></body>
</html>

信息层

主要是白色底的一个盒子

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title><style>.modal{background: black;position:fixed;left:0;top:0;right:0;bottom:0;opacity: 0.4;}.info{position: fixed;background-color: white;width: 400px;height: 300px;left:50%;top: 50%;margin-top:-150px;margin-left:-200px;}</style>
</head>
<body><input type="button" value="显示">
<div class="modal">1</div>
<div class="info">2</div></body>
</html>

往白色的块里添加表单

并且简单的调整样式

<!DOCTYPE html>
<!--作者：pyhui-->
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>Title</title><style>.modal{background: black;position:fixed;left:0;top:0;right:0;bottom:0;opacity: 0.4;}.info{position: fixed;background-color: white;width: 400px;height: 300px;left:50%;top: 50%;margin-top:-150px;margin-left:-200px;}form{width: 80%;height: 40%;/*background-color: yellow;*/margin: 50px auto 0;}</style>
</head>
<body><input type="button" value="显示"><!--遮罩层-->
<div class="modal">1</div><!--信息层-->
<div class="info">
<!--    表单--><form action="">姓名：<input type="text" name="username"> <br><input type="submit" value="提交"><input type="button" value="取消"></form>
</div></body>
</html>

css-模态框的制过过程相关推荐

css——模态框【遮罩层的制作；信息层；往白色的块里添加表单】
目录 1.遮罩层的制作 2.信息层 3.往白色的块里添加表单 1.遮罩层的制作 <!DOCTYPE html> <html lang="zh-CN"> ...
bootstrap——模态框
目录模态框类似js中alert(); 1.模态框的主样式:modal 2.模态框的代码最好是直接作为body的子元素,而不是后代元素 3.模态框的区域: 4.与Bootstrap.js中的相关属 ...
基于Bootstrap和animate.css的模态框动画效果
最近在网上看到了可以对Bootstrap模态框增加打开和关闭的动画效果,故记录一下.原文地址点这里此动画效果需要引入animate.css,可以在animate.css官方网址中点击下载animat ...
html怎么自动弹出模态框,纯CSS实现带点击模态框外部自动关闭的模态框
在网页中我们经常会用到模态框,一般会用于显示表单或者是提示信息.由于模态框涉及到页面上比较多的交互效果,最简单的交互就是打开以及关闭两个操作,而关闭又会涉及是否需要在打开状态下点击模态框外部能够关闭这 ...
父画面给模态框加css,Recat 自定义模态框随心所欲CSS动画
师兄最近深陷React的坑不能自拔~觉得React似乎比angular或者ionic要更有意思(不愧脸书),在业务代码上跑多了,就不断有想法:项目中使用了ant-mobile 但是这个UI框架给人的感 ...
HTML+CSS+JavaScript实现模态框（可拖拽）
前言模态框是指覆盖在父窗口上的子窗口,但在HTML网页中,并没有父窗口和子窗口的概念.这里是通过可隐藏的遮罩层和一个可隐藏的盒子来实现模态框的效果. 效果演示: 下面开始详细介绍如何实现一个可拖拽的 ...
基于bootstrap模态框的日期选择器
近来由于工作需求,以bootstrap模态框+DIV+CSS+JS做了一个适用于移动端的日期选择器,能够满足多样的需求,目前处于第一个版本,后续可能会继续更新.废话不多说,直接进入制作过程. 首先,需 ...
Bootstrap学习(七）modal模态框、data属性、过渡事件、滚动监听事件
模态框模态框(Modal)是覆盖在父窗体上的子窗体.通常,目的是显示来自一个单独的源的内容,可以在不离开父窗体的情况下有一些互动.子窗体可提供信息.交互等. <div class=" ...
28 模态框拖动案例
1.模态框拖拽案例模态框也称为弹出框. 功能需求: 点击弹出层,会弹出模态框,并且显示灰色半透明的遮挡层点击关闭按钮,可以关闭模态框,并且同时关闭灰色半透明遮挡层鼠标放到模态框最上面一层,可以按 ...

css-模态框的制过过程

遮罩层的制作

信息层

往白色的块里添加表单

css-模态框的制过过程相关推荐

最新文章

热门文章