javascript 弹出层（警告框）的制作(css元素居中、javascript元素居中)

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>弹出层的制作</title></head><style type="text/css">body {padding: 0;margin: 0;}#bg {position: absolute;width: 100%;height: 100%;background: blanchedalmond;opacity: 0.5;display: none;}p {margin: 0 auto;font-size: 30px;background: #00FFFF;width: 130px;height: 50px;cursor: pointer;line-height: 50px;text-align: center;}#win {position: absolute;top: 30%;left: 50%;width: 400px;height: 200px;background: #fff;border: 4px solid #f90;margin: -102px 0 0 -202px;display: none;}h2 {margin: 0;width: 100%;height: 50px;background: skyblue;}#close {float: right;width: 50px;height: 50px;text-align: center;line-height: 50px;display: block;cursor: pointer}</style><script type="text/javascript">window.onload = function() {var oBg = document.getElementById("bg");var oBtn = document.getElementById("btn");var oWin = document.getElementById("win");var oClose = document.getElementById("close");oBtn.onclick = function() {oBg.style.display = "block";oWin.style.display = "block";}oClose.onclick = function() {oBg.style.display = "none";oWin.style.display = "none";}}</script><body><div id="bg"></div><div id="win"><h2><span id="close">×</span></h2></div><p id="btn">弹出层</p></body>
</html>

CSS实现绝对定位元素的居中效果

     position: absolute;top: 50%;left: 50%;width: 400px;height: 200px;border: 4px solid #f90;margin: -102px 0 0 -202px;//宽高的一半

javascript实现元素的居中效果

 居中的元素的top =（网页高 –元素的高）/ 2;居中的元素的left= (网页宽 –元素的宽) /2;转化为JavaScript的语法为：top = (document.body.clientHeight - element.offsetHeight)/2;left = (document.body.clientWidth - element.offsetWidth)/2

javascript 弹出层（警告框）的制作(css元素居中、javascript元素居中)相关推荐

JavaScript 弹出层，背景变暗
JavaScript 弹出层,背景变暗,代码不算多,根据你的需要调整一下,这里只是实现了基础的思路,美化不是太好. <title>JavaScript 弹出层,背景变暗</title ...
js控制浏览器窗口弹出、警告框、确认框
描述 js控制浏览器窗口弹出.警告框.确认框代码 function fun1(){alert("喜欢我"); }function fun2(){var bo = confirm( ...
PC 如何阻止弹出安全警告框
一.关闭安全警报服务我们先来看看总是报安全警告的情况 1.首先,我们可以通过设置关闭安全警报服务,从而阻止了安全警报的提示出现.在桌面上开始菜单处,点击"运行",然后在输入框中输 ...
分享123个JS特效弹出层，总有一款适合您
分享123个JS特效弹出层,总有一款适合您 123个JS特效弹出层下载链接:https://pan.baidu.com/s/1mH0heedscCrBmft_zOjjwA?pwd=n4eo 提取码: ...
前端框架Layui学习五：弹出层和数据表格
Layui layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,拿来即用. 一.弹出层在 layui 中使用 layer l ...
Js实现点击超链接弹出层，效果仿Discuz登录！
主要应用到的是dispaly:none 和 dispaly:block;来控制实现的: <a id="link" href="#" onclick=&qu ...
移动端 js 弹出层内容滚动的时候，不影响body的滚动条处理
如标题所示,这里受 https://segmentfault.com/a/1190000003849952 这篇文章的启发,自己重写了一下代码效果图: 代码: <!DOCTYPE HTML&g ...
layui之layer各种弹出层
layui提供了页面弹出层组件layer,能够满足用户的各种需求,它不仅可以作为独立组件使用也可以在layui模块化中使用. layer弹出层分类 layer弹出层有5种,使用type配置参数来指定分 ...
layui弹出层html,layer弹出层
layer 弹出层,怎么只让他弹出一次.在线等我昨天用这个插件的时候也有这个问题,弹出内容大了就居不了中.这是组件不完美的地方,他设置了top和left值,而且是固定的.这种弹出层都是绝对定位的所 ...
js制作带有遮罩弹出层实现登录小窗口
要实现的效果如下点击"登录"按钮后,弹出登录小窗口,并且有遮罩层(这个名词还是百度知道的,以前只知道效果,却不知道名字) 在没有点击"登录"按钮之前登录小窗口 ...

javascript 弹出层（警告框）的制作(css元素居中、javascript元素居中)

javascript 弹出层（警告框）的制作(css元素居中、javascript元素居中)相关推荐

最新文章

热门文章