javascript:自定义弹窗的写法

项目中经常出现广告弹窗，记录下简单弹框写法。

基本html结构：

<div class="popBox"><div class="popBox-mask"></div><div class="popBox-content">
    <!-- 书写弹框内容 --></div>
</div>

css:

.popBox-mask{position: fixed;left: 0;right: 0;top: 0;bottom: 0;opacity: .6;z-index: 999;background-color: #000;
}
.popBox-content{position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 999;
}

所有的弹框可以复用以上代码，各个弹框要加上唯一标识。具体demo如下：

<!doctype html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport"content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>Document</title><style>/*通用*/.popBox-mask{position: fixed;left: 0;right: 0;top: 0;bottom: 0;opacity: .6;z-index: 999;background-color: #000;}.popBox-content{position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);z-index: 999;}/*各个弹框下的样式可以自己更改*/#popBox-demo .popBox-content{width: 600px;height: 400px;background-color: #fff;text-align: center;}#popBox-demo p{line-height: 400px;margin: 0;}#popBox-demo .btn-close{position: absolute;top: 20px;right: 20px;}</style>
</head>
<body><button οnclick="showPopBox()">出现弹框</button><div class="popBox" id="popBox-demo" style="display:none"><div class="popBox-mask"></div><div class="popBox-content"><p>很丑的例子</p><a href="javascript:void(0)" class="btn-close" οnclick="hidePopBox()">关闭</a></div></div><script>//显示弹框function showPopBox(){document.getElementById('popBox-demo').style.display = 'block';}//关闭弹框function hidePopBox(){document.getElementById('popBox-demo').style.display = 'none';}</script>
</body>
</html>

效果图：

javascript:自定义弹窗的写法相关推荐

JavaScript 自定义对象
原文:JavaScript 自定义对象在Js中,除了Array.Date.Number等内置对象外,开发者可以通过Js代码创建自己的对象. 目录 1. 对象特性:描述对象的特性 2. 创建对象方式: ...
Javascript自定义事件功能与用法实例分析
原文地址:https://www.jb51.net/article/127776.htm 本文实例讲述了javascript自定义事件功能与用法.分享给大家供大家参考,具体如下: 概述自定义事件很难 ...
qtabwidget放大_Qt自定义弹窗屏蔽父窗口（QWidget设置setWindowModality(Qt::ApplicationModal);以后再show）...
写Qt程序时遇到一个问题: Qt自带的弹窗功能单一,所以须要自己用ui设计弹窗的内容,这样弹窗就和普通窗口一样了,但问题是这个弹窗显示后父窗口还是活动的.网上找了很久找到了解决办法: Qt::Wind ...
FineReport中如何用JavaScript自定义地图标签
2019独角兽企业重金招聘Python工程师标准>>> 在日常使用地图过程中,通常会遇到地图标签,提示点等显示不满足我们的需求,需要进行JavaScript代码编写. 例如:在使用地 ...
html 元素允许右键,JavaScript 自定义html元素鼠标右键菜单功能
自定义html元素鼠标右键菜单实现思路在触发contextmenu事件时,取消默认行为(也就是阻止浏览器显示自带的菜单),获取右键事件对象,来确定鼠标的点击位置,作为显示菜单的left和top值 ...
JavaScript - JavaScript自定义弹出对话框
本脚本使用自定义的浮动窗口替代浏览器自己的对话框,效果非常不错.包含Error | Warning | Success | Prompt 四个对话框窗口兼容性:IE6+ FireFox2+ Oper ...
flutter自定义弹窗
今天接到这样一个需求,需要自定义弹窗,所以就有了如下的代码: 通过分析,一切皆widget 所以可以这样实现: import 'package:flutter/cupertino.dart'; imp ...
【转载】100多个很有用的JavaScript函数以及基础写法大集合
1.document.write("");为输出语句 2.JS中的注释为// 3.传统的HTML文档顺序是:document->html->(head,body) 4 ...
[JavaScript]自定义MessageBox
前言: 继上文([JavaScript]自定义Title的显示方式)之后,我的工作是进一步增强一些IE所不能提供的东东. 还记得Windows下的MessageBox嘛? IE呢?Alert?Conf ...

javascript:自定义弹窗的写法

javascript:自定义弹窗的写法相关推荐

最新文章

热门文章