第一种： alert

alert("hello!")

第二种：window.confirm()

A : 弹出窗口

return true;

}else{

//alert("取消");

return false;

}

第三种：prompt

prompt 方法也将显示一个模式消息框。用户在继续操作之前必须先关闭该消息框

var theResponse = window.prompt("欢迎？","请在此输入您的姓名。");

页面代码 测试

function prom(href)

{

var name=prompt("input the name","");

if(name=="admin")

{

var pwsd=prompt("input the password","");

if(pwsd=="admin")

{

alert("login ok...");

location.href=href;

}

else{alert("error password");}

}

else{alert("error name");}

}

原文：http://www.cnblogs.com/wushuishui/p/4346824.html

js

html,body{height:100%;overflow:hidden;}

body,div,h2{margin:0;padding:0;}

body{font:12px/1.5 Tahoma;}

center{padding-top:10px;}

button{cursor:pointer;margin: auto;}

#overlay{position:absolute;top:0;left:0;width:100%;height:100%;background:#000;opacity:0.5;filter:alpha(opacity=50);display:none;}

#win{position:absolute;top:50%;left:50%;width:400px;height:200px;background:#fff;border:4px solid #f90;margin:-102px 0 0 -202px;display:none;}

h2{font-size:12px;text-align:right;background:#FC0;border-bottom:3px solid #f90;padding:5px;}

h2 span{color:#f90;cursor:pointer;background:#fff;border:1px solid #f90;padding:0 2px;}

弹出层

var aBtn = document.getElementsByTagName('button')[0];

var oDiv1 = document.getElementById('overlay');

var oDiv2 = document.getElementById('win');

var oSpan = oDiv2.getElementsByTagName('span')[0];

aBtn.onclick = function(){

oDiv1.style.display = 'block';

oDiv2.style.display = 'block';

}

oSpan.onclick = function(){

oDiv1.style.display = 'none';

oDiv2.style.display = 'none';

}

一键复制

编辑

Web IDE

原始数据

按行查看

历史

最终效果：利用纯粹的html、css实现静态网页弹出层，并在弹出层中实现登录功能

利用html、css实现网页弹出层(是静态的)，我在弹出层中加入了form表单实现了登录功能

一：先使用一个图片来作为页面：

html：

css：

.main img{

object-fit: cover;

width: 100%;

}

object-fit一般在视频、图片中使用，表示其适应方式 它有三个取值：fill默认值，不保持比例，图片全部显示

contain保持宽高比例，图片不能溢出

cover比例不变，填充满，牺牲掉图片信息

二：一般弹出层出现在网页上时，整个网页作为背景会虚化 需要一个遮罩层：

html：

css：

.modal{

position: fixed;

width: 100%;

height: 100%;

left: 0;

top: 0;

background-color: rgba(0, 0, 0, 0.5);

}

固定定位position: fixed

宽高为auto，适应内容

元素一定是块盒(即display: block)

没有外边距合并

包含块：固定为视口(浏览器的可视窗口)

一个元素，只要position的取值不是static，认为该元素为定位元素定位元素会脱离文档流(相对定位position: relative除外)

文档流中的元素摆放时，会忽略掉脱离了文档流的元素

文档流中元素计算auto高度时，会忽略脱离了文档流的元素(高度坍塌)

在颜色位置设置alpha通道每个颜色都有透明通道，取值0~1(0：完全透明；1：不透明)

rgba(red, green, blue, alpha)

hex：#rgba

设置透明还有另一种： 利用opacity属性，但是它设置的是整个元素的透明度

因为我在此是为了实现弹出层，除了弹出层的网页部分需要虚化，而不是整个网页都虚华；所以我才用的是在颜色位置设置alpha通道

三：遮罩层的中间需要装一个弹出层：

html：

container容器中的文字： lorem 乱数假文，在网页的开发中，很多文本标签中的内容其实是无所谓的，到了后面会被替换成动态页面，但是开发时，还是要写啊，用乱数假文就好了，自动生成内容，长度不一的东东

css：

.modal .container{

width: 404px;

height: 512px;

background-color: #fff;

position: absolute;

left: 0;

right: 0;

top: 0;

bottom: 0;

margin: auto;

box-sizing: border-box;

border-radius: 6px;

padding: 1em;

}

绝对定位其他情况和固定定位完全相同

只有包含快不同：找祖先元素中第一个定位元素，该元素的填充盒；若找不到，则它的包含块为整个网页(初始化包含块)

它的父元素是固定定位(即：定位元素)，所以它的包含块为父元素的填充盒

定位下的居中 1. 定宽(高) 2. 将左右(上下)距离设置为0 3. 将左右(上下)margin设置为auto

在绝对定位和固定定位中，margin为auto时，会自动吸收剩余空间

每一个html元素，都可以看作一个盒子：

以我给的这个图为例，1536 × 40 ，1536为width，40为height (默认情况下，height、width决定的区域：内容盒，content-box)

但是

box-sizingcss3中的新属性，改变宽高(height、width)的影响范围

box-sizing: border-box;宽高影响范围为边框盒

比如说：(width = 内容宽 + padding-left + padding-right + border-left + border-right)，当width设置好之后，内容宽的值会随border和padding的取值而随之变化

注意啊：box-sizing的取值只有content-box和border-box；前两者加paddding-box是background-clip的取值

内容盒 content-box = 内容区(默认情况下，height、width决定的区域)

填充盒 padding-box = 内容区 + 填充区

边框盒 border-box = 内容区 + 填充区 + 边框

圆角由border-radius属性决定

四：在弹出层上加一个关闭：

加入的关闭按钮只是给你看的，点不了(只用HTML、CSS只能实现静态页面)

看起来虽然很丑，但实际上弹出层的静态页面的框架已经搭的差不多了

html：

css：

.modal .container .close{

width: 30px;

height: 30px;

border-radius: 50%;

position: absolute;

right: -10px;

top: -10px;

border: 2px solid #fff;

cursor: pointer;

background-color: #008c8c;

text-align: center;

line-height: 30px;

}

鼠标样式cursor: pointer

鼠标放置到此区域时，鼠标显示的样式

cursor常用取值:auto 默认值，由浏览器控制鼠标样式

url(""), autourl中填写.ico或者.cur文件，当文件不可用时，采用auto

pointer小手

help帮助

还有很多取值

文本水平居中:

text-align: center;

文本垂直居中:

height: 30px;

line-height: 30px;

使line-height和height取相同值

自此，教程基本结束，下面的内容是我在弹出层的框架上进行一些修改，也改了一点点css样式(改了宽高)并且加入了form表单，让弹出层实现登录功能 然后， 为了美化这个登录弹出窗口，我加入了大量css属性(这里不赘诉了)，最后还剩下表单元素还没有美化：

五：美化弹出窗口

我在这里就只说明一下，我对form表单的操作：

html：

表单元素其实挺特殊的，首先我们要了解一个伪元素focus元素聚焦时的样式

浏览器中，每个元素都有聚焦时样式

比如说Chrome中：

:focus{

outline: -webkit-focus-ring-color auto 5px;

}

第一个参数代表的是一种浏览器提供的颜色 第二个参数是设置外边框样式 第三个参数是设置边框宽度(当第二个参数为auto时，此参数无效)

若我们自己写一个focus样式

:focus{

outline: 1px solid #008c8c;

}

会发现不是我们想要出现的样子，边框向内移动了2px 因为，浏览器还添加了这么个样式：

outline-offset: -2px;

解决办法： 1. 将solid改为auto(outline-offset会无效) 2. 重置outline-offset: 0;

所以在写表单元素时，需要进行表单元素重置：

input,textarea,button,select{

border: none;

}

input:focus,

textarea:focus,

button:focus,

select:focus{

outline: none;

outline-offset: 0;

}

input[type="text"],

input[type="password"],

textarea,

select{

border: 1px solid #999;

box-sizing: border-box;

}

input[type="text"]:focus,

input[type="password"]:focus,

textarea:focus,

select:focus{

border: 1px solid #008c8c;

}

button{

border: 2px solid #008c8c;

border-radius: 6px;

}

input[type="text"],

input[type="password"],

textarea{

text-indent: 0.5em;

}

最后对表单元素这块区域利用css进行了微调(不再赘述)

开发工具：VsCode、Chrome

语言：html、css