我们经常会在新闻里看到或听到关于用户数据泄露的事件，这些用户数据的泄露会对网站或服务的使用者产生非常严重的安全威胁。作为一个网络用户，您对用户数据泄露的严重程度和这些用户数据泄露事件背后的具体细节，又了解多少呢？
谈到数据泄露，就不得不介绍一下与之相关的几个常用的黑客术语。在与数据泄露事件相关的报道中，经常可以听到拖库，洗库和撞库这几个词。拖库指的是黑客入侵有价值的网站，把注册用户的资料数据库全部盗走的行为。洗库是指在取得大量的用户数据之后，黑客会通过一系列的技术手段和黑色产业链将有价值的用户数据变现。撞库是黑客通过收集互联网已泄露的用户和密码信息，生成对应的字典表，尝试批量登陆其他网站后，得到一系列可以登录的用户信息列表。由于很多用户习惯在不同网站使用相同的帐号密码，因此黑客可以通过获取用户在A网站的账户信息去尝试登录B网址，这就可以理解为撞库攻击。
黑客获取用户数据的手段（拖库/data breaches） 黑客获取用户数据的手段主要分为社工手段和技术手段。社工手段主要是利用人的心理学特点，通过欺骗或冒充等手段获取信息，比如利用邮件、钓鱼网站等手段获取用户信息。技术手段则是指利用系统本身的漏洞直接侵入目标系统获取用户信息。在实际攻击过程中，黑客往往会混合使用这两种方法。 为了说明拖库，洗库和撞库这三者之间的关系，以下选用了启明星辰安星web 安全运维团队在总结2011大规模数据泄露研究报告中的一张图。这张图非常清楚地说明了这三个环节之间的相互关系。
那么，到底目前网络用户信息泄露问题有多严重呢？
在国内，2016年以前有一个专门曝光用户数据泄露事件的网站叫乌云网。如果留意看新闻的人应该还记得，在2016年之前经常有关于在乌云网上报出的用户数据泄露事件。乌云网曾经曝光的携程支付漏洞和12306网站用户数据泄露事件，目前在百度百科上还可以搜到。但这个由“白帽子们”发起的可以用来衡量网络安全程度的安全问题曝光网站，在2016年被强制关闭了。对于这一事件的评价有着非常极端的两面性，赞同关闭的人认为数据泄露事件曝光后，会有更多的黑客利用被曝光的漏洞进行攻击。反对的人则认为，没有这样的网站，服务提供商不会那么重视网络服务的安全，在提供更多服务的同时，会产生更多的系统漏洞，从而会给网络用户带来更多的危险。但不管怎样，乌云网被关闭的事件说明，黑客使用技术手段大量获取用户资料不是偶发事件，而几乎是网络安全的常态。
当失去乌云网后，网络用户是否真的无法知道当前的用户数据泄露问题有多严重了呢？
其实不然，在这方面比乌云网更出名的类似网站还有”Have I been Pwned?”（HIBP）。2013年底，网络安全专家Troy Hunt意识到当时的用户数据泄露已经达到了无法控制的地步，所以他决定与其让黑客独享这些数据，不如把所能获取到的数据制作成可以搜索的数据库，让普通用户也可以很容易地知道自己的资料是否已经泄露了。如果您还没有听说过这个网站，建议您可以去这个网站上检查一下自己账号的安全性。HIBP网站的网址是：https://haveibeenpwned.com。如下图HIBP网首页站所显示，到目前为止HIBP所记录的被泄露的用户数已高达50多亿。
除了可以自行去HIBP网站查找自己的用户名和密码是否被泄露以外，目前很多网络服务其实也在使用HIBP的数据来帮助用户提高账号的安全程度。比如，作者本人就曾在登陆GitHub时收到过下图所示的警告信息。
这个警告信息是说，您的账号目前已经可以在HIBP的数据库中找到了，建议更改和使用更高强度的密码。 当您去HIBP中查找后，若发现资料已被泄露，HIBP还能很贴心地告诉您，您的资料是在哪次数据泄露事件中被搜集的，您的什么资料可以在HIBP数据库中找到，如下图所示。
用户数据的利用（洗库） 前面我们谈到的是用户数据是如何被泄露的，以及目前用户数据的泄露问题有多严重。那么，当黑客获取到某个网站的用户数据后，这些数据是如何被利用的呢？基本上，被盗取的数据分成两部分：第一部分是以明文形式存储的用户信息，比如，姓名、电话号码、邮件地址等，更严重的可能还包括身份证号码、信用卡、银行账号等敏感信息。黑客可以把这些信息打包出售给不同的非法使用者。第二部分就是加密过的用户密码。为了最大程度地保护用户信息安全，大多数网站一般都是采用加密方式来存储用户密码，而不是明文存储。前面提到的HIBP网站上已泄露的用户密码就是存储的密码Hash值而不是明文。如果您想了解更多关于Hash算法的介绍，可以参考另一篇文章网络信息安全领域中常见的几个概念。黑客需要破解经Hash算法加密后的密码才能使用这一部分数据。用于破解密码Hash值的主要方法是碰撞攻击（Collision attack），维基百科上对Collision attack有非常详细的介绍。当黑客利用Collision attack将破解了的用户密码和用户名配对制成一张表格后，黑客就可以利用这张表来进行第二轮攻击了。
用户数据的再次利用（撞库） 如果不考虑社工手段，黑客使用技术手段获取的用户数据，主要是利用系统漏洞攻击那些防护措施薄弱的网站所得到的。当黑客把用户数据整理成一张可以再次使用的表格时，非常多的网站都可能被攻陷了。这主要是由于用户往往会使用同样的用户名和密码来注册不同的网络服务，这样黑客就可以利用已知的用户信息来获取其他网站同一用户的资料。这也就是为什么很多的用户数据泄露是通过撞库攻击所得到的。
如何保护自己的网络信息安全 所谓道高一尺，魔高一丈。网络上的攻防战争是永远没有结束那一天的。信息安全是服务提供方和用户本身双方的责任。做为网络用户，我们应该怎么办？其实，有很多方法是可以提高网络信息安全水平的，但讲多了，大多数人无法做到。这里只提最重要的三点供参考： 1. 不要使用同一用户名和密码来注册所有的网络服务。这无疑是最不安全的做法； 2. 提高密码的复杂程度。建议使用8位以上，数字、字母和符号的组合密码； 3. 对于重要的账号开启多重验证方法，如密码加短信，密码加OTP验证等。
以上第一、第二点，相信大家已经听过无数遍了。如果做到这两点，就会极大程度地增加黑客的工作量。要知道，黑客的时间也是很宝贵的，当您的防范措施比其他人复杂得多时，黑客可能就会选择放弃，而去尝试下一条数据了。
对于第三点多重验证，这本来是用于对安全性要求很高的网络服务所提供的安全措施，但随着用户数据泄露问题越来越严重，多重验证也逐渐被主流的网络服务所采用了。
什么是多重验证？多重验证是指，当用户在使用网络服务时，需要通过两种以上的认证机制之后才可以使用网络服务。这里讲的认证机制是指相互独立的验证手段。比如，当用户输入了用户名和密码后，系统提示还需要输入短信验证码。通常，当用户在陌生或新设备上登陆账户时，系统就会要求两种以上的认证机制。多重验证能更有效地保护用户账号安全。
多重验证根据复杂程度可以分成很多种，比如安全性最高的基于不对称加密算法的U盾，被广泛应用在银行业中。在一般的多重验证手段中，更常用的是邮件、短信、密码器、软件密码器或基于常用设备的应用推送等。这些常用的验证手段多数是基于一次性密码（OTP）的验证方法。随着国内互联网行业的飞速发展，一些具有创新性的多重验证方法也逐渐在国内流行开来。比如基于常用设备的二维码识别，这本来是微信和支付宝率先使用的验证和支付手段，目前很多国内银行的网银登陆也开始支持二维码扫描登陆了。除了二维码外，比较特别的验证方法还有，微信支持声纹验证，支付宝和百度支持面部识别等。由于多重验证方法种类繁多，无法逐一介绍，下表例举了一些常用网络服务所支持的多重验证方法供参考。
随着多重验证的使用和用户账号管理的复杂程度越来越高，国内的领先互联网服务提供商开始使用一站式的安全应用来专门用作账户管理。其中具有代表性的有QQ安全中心、百度账号管家和网易账号管家等。这些应用通常要求用户将应用与常用设备绑定，然后通过绑定后的应用来管理用户的账户设置。这样的一站式应用可以提供更多元的账户管理功能，比如账户功能的开启和关闭，被盗账号的找回等等。 现在，您一定对互联网账户的安全有了进一步的了解。是否很想去HIBP网站上查一下自己的资料有没有被泄露？如果在HIBP的数据库里能查找到您的账号，以上提及的三点就是您必须要立即采取的防范措施，否则理论上说，所有人都可能通过HIBP找到您的用户名和密码，登录您的账号了。
PassXYZ是一款跨平台的密码管理软件，可以运行在安卓和苹果手机以及Windows 10上。 PassXYZ基于著名的开源软件KeePass开发，所以兼容KeePass数据格式。PassXYZ的核心代码可以在开源社区GitHub上获取。PassXYZ最大的特点是通过提供大量的个人信息记录模板来分享和传递良好的使用习惯。PassXYZ个人信息管理软件和PassXYZ公众号的目标是通过两者的结合来推动和提高公众的个人信息管理水平。
您可以通过苹果应用商店，微软应用商店，Google Play和华为应用商店搜索关键字PassXYZ来下载该应用。如果您想获得更多模板或对个人信息安全及管理有兴趣，可以搜索关键字PassXYZ关注公众号。您也可以通过微信号passxyz_kpclib来添加此公众号。PassXYZ公众号专注于个人信息安全及管理的相关知识。
小程序火起来是事实的，因为据腾讯2017年微信用户报告，日活用户达9.02亿，阿里、百度、谷歌、FaceBook等巨头分别推出了自己的小程序，说明千万别低估了小程序等轻应用！但谈到过度的颠覆、风口、替代、成本低、完爆、无需代码、圈地、一键生成等等营销字眼，我陷入了沉思。
成本低？
开发成本：
各大平台分别推出了自己的小程序开发平台，基于云端可以快速生成小程序界面，并提供了大量模板供用户付费购买。大尺度的宣传国内领先、海量小程序行业模板、一键生成、无需代码等等。
不懂技术的人，也许会简单的认为，微信小程序就是类似于我们平常接触的H5页面，WebApp或者手机端网站，只要将原有的代码改改，就可以变成微信小程序。其实这种想法是错误的，微信小程序相当于重新做了一个不同于传统形式的App，从开发、设计、测试、运维升级都是单独的一套。换句话说，以后要做小程序开发，就需要一个新的技术岗位。
一键生成必须要兼容拖拉成的H5页面，一是先转换成小程序代码后发布，二是在小程序中嵌套H5转小程序，前者必须时刻跟进小程序的API更新，而且中间转换的问题比较难兼容，后者市面上不少开源的提供，但多少会牺牲一些性能，而且也是兼容有限。
所以各大平台推出的一键生成是有一定的局限的，稍微复杂一点的小程序，必须定制外包，外表这层宣传壳只是吸引人，真正请了大量的开发在后面服务，复杂的一点的小程序几百块就变成了几万块。
冷静点，一键生成只是个很强的辅助功能，至少可以减少大量的工作量，但吹成万能就不厚道了。
营销成本：
小程序设计完成后，接下来该想想怎么招揽用户了，如果真的什么都不用管用户自己刷刷刷就进来了，那么还要运营做什么呢？零营销成本你就吹吧！
主动搜索 首先用户清晰得知道你的名字，而且知道你的小程序能干什么！
扫描二维码 扫描二维码，这是微信官方最期望开发者引导用户做的，这里主要的运营点在线下。
分享 分享传播引导、活动运营、社群运营三个运营点的考验，这也是线上运营最值得去深耕的地方。
公众号关联 这也就意味着用户可以从公众号里进入其相对应的小程序，亦可从小程序里跳转至相对应的公众号。
历史使用 已经被打开过的小程序会被记录在小程序的入口二级页面列表当中，并且会按照你的启动先后顺序排列。
不如原生APP?
张小龙对小程序特性的总结：“无需安装、触手可及、用完即走、无须卸载”,这是它的一个重大靓点。
也就是说小程序也并不是万能的，大部份应用在小程序上跑，基本上是没有问题的，同时小程序提供的API很多有限制，比如我上次想尝试截个屏！都哪些应用成功上线呢？比如滴滴、美团、蘑菇、京东、骆驼等等。
别低估小程序
既然提出这么多不满意与黑幕，是不是小程序就没有价值了呢，还那是请你不要低估它的价值，巨大的流量与相比原生APP成本要低很多是事实，有冲击也有商机，如果你不把握，在流量被瓜分的时代，多个入口就多一份机会，毕竟它的优势与APP、PC等入口形成了互补的关系。
特别是对于预算有限的创业团队，快速在小程序上实现自己的产品想法，并通过入口快速印证自己的想法是否可行，相对传统方式更低成本与优势。
并且文章开头就有提到，各大巨头布局小程序，这也说明它的趋势与价值，至于说颠覆那是个大坑。不然哪里来的这么多骗子公司，腾讯发表声明：凡是打着腾讯官方旗号，打电话或者邀请商家参加什么大会的，基本上都是骗子。
既然表明了立场是过度营销了，还上当受骗、贪小便宜的，风口那只猪们吹过来给我宰吧，杀了我好卖肉换钱。
小程序现状
小程序数量：官方公布，目前已上线的小程序数量100万+。小程序服务提供商还有很大的发展空间，多个渠道布局比被动要强N倍！
微信官方大力扶持
在2018中国“互联网+”数字经济峰会上，微信开放平台负责人明确表示“我们要做一个工具箱，做一个助力大家来经营这个生态，希望帮助大家在数字经济的时代，智能化数据化的时代一起来找到用户，挣更多的钱”。
持续关注小程序的小伙伴，应该在线上的腾讯云、官方媒体等，线下有微信官方活动、发布会、替各大合作小程序合作伙伴站台。这已经说明官方的支持力度，甚至腾讯云类网站，经常发布小程序相关的优惠政策，降低创业团队的门槛。
如何成为小程序服务商？
1.自建技术团队
2.代理某某品牌
第一条因技术成本，开发周期，大多数人基本不用考虑
第二条呢，方案可行，当存弊端太多，天花板可见，不是创业最佳选择，而且骗子不少。交了加盟费，公司就消失了。
代理的弊端
不是自己的品牌。用他人的品牌，必然要受品牌方的约束和管理，推广他人的品牌，为品牌方做嫁衣，这到底算不算自己的事业呢？
数据不在自己手上。大数据时代，最值钱的是数据。辛辛苦苦开发的商户，数据都被总部收集走了，后续的营销，数据变现还跟自己有关系吗？
区域及套数限制。进入一个行业，最痛苦的是，天花板可见；最佳的选择，一定是站在食物链的最顶端。有区域限制，意味着能开发的商户就那么多，市场空间有限；有套数限制，那不就是赚差价的黄牛么？自己组建技术团队不可行，做别人代理不甘心。怎么办？
米筷轻应用开发平台提供私有化部署解决方案
就像小程序与APP互补一样，解决云端小程序开发平台解决不了的难题，各取所需。
米筷产品致力于为用户的移动互联提供快速、易用、成本低的轻应用开发平台，后续将会推出在线体验版本、并提供免费下载，陆续在开发通用后台插件与模板。
欢迎访问米筷官网
如同 android 开发一样，最开始Android开发依托的语言时Java，除啦eclipse和Androidstudio这两款编辑器，还有eclipse和myEclipse专门用作java的开发，flutter的开发也是类似，flutter的开发依托于dart语言，我们使用intellij idea来简单的学习dart语言，之后再用androidstudio开做整体的项目demo。接下来就开始intellij idea的dart开发环境的搭建。他的搭建和androidstudio环境的搭建类似。也可以参考我写的Androidstudio flutter环境的搭建：https://mp.csdn.net/postedit/82051118
1、下载flutter sdk从https://git-scm.com/download/win 2、dart插件的安装
1）、依次选择 File -> Setting 打开 IDEA 设定的界面
2）、选择 “Plugins” 选项，在输入输入“Dart”并点击搜索按钮，之后重新启动即可。
3、配置dartsdk的位置如下：
4、创建属于自己的dart项目
1）、选择file-new-project
2)、在语言列表选择dart语言
直接点击finish按钮，完成即可。
创建成功后显示的界面如下：
接下来就可以开始新的dart之旅啦。
平常遇到喜欢的页面总喜欢拿来欣赏一番，今天就以webpack+vue的项目为例分析一下打包后的源码。 环境： webpack4.16 vue2.5.16
为了方便理解，先使用webpack打一个最简单的包（未使用vue），下面是混淆压缩前的伪代码
(function (modules) { var installedModules = {} // 缓存模块 // 处理AMD commonjs ESModule function __webpack_require__(moduleId)() { ... return module.exports} __webpack_require__.m __webpack_require__.c __webpack_require__.d __webpack_require__.r __webpack_require__.n __webpack_require__.o __webpack_require__.p return __webpack_require__(__webpack_require__.s = "./src/index.js") })(obj) var obj = { // 入口js处理 './src/index.js': (function(module, __webpack_exports__, __webpack_require__) {"use strict"; eval(`__webpack_require__.r(__webpack_exports__);\n/* harmony import */ var _js_home__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(/*! ./js/home */ \"./src/js/home.js\");\n/* harmony import */ var _js_home__WEBPACK_IMPORTED_MODULE_0___default = /*#__PURE__*/__webpack_require__.n(_js_home__WEBPACK_IMPORTED_MODULE_0__);\n\r\n\r\n console.log('index.js')\n\n//# sourceURL=webpack:///./src/index.js?`); }), // 其他js处理 '.
bootstrap4使用及常用样式整理 简介 Bootstrap 是全球最受欢迎的前端组件库，用于开发响应式布局、移动设备优先的 WEB 项目。Bootstrap4 目前是 Bootstrap 的最新版本，是一套用于 HTML、CSS 和 JS 开发的开源工具集。利用我们提供的 Sass 变量和大量 mixin、响应式栅格系统、可扩展的预制组件、基于 jQuery 的强大的插件系统，能够快速为你的想法开发出原型或者构建整个 app 。Bootstrap4 放弃了对 IE8 以及 iOS 6 的支持，现在仅仅支持 IE9 以上 以及 iOS 7 以上版本的浏览器。如果对于其中需要用到以前的浏览器，那么请使用 Bootstrap3。入门详细学习请参考 菜鸟教程.
引入方式 前端项目基于jquery去构建：可以直接引入cdn库，bootstrap4.css、jquery.js、bootstrap4.js
前端项目基于react去构建：bootstrap4.css（scss,less）、react.js、react-bootstrap
前端项目基于angular去构建：bootstrap4.css（scss,less）、angular4、ngx-bootstrap
目录 容器和网格系统
字体颜色及背景颜色
边框
内边距（pading）外边距（margin）
清除浮动
display 显示
嵌入元素样式
弹性布局
浮动
图片替换文字
定位
尺寸（size）
文本
垂直对齐（Vertical alignment）
显示隐藏
表格
按钮及按钮组
列表
表单组
信息提示框
三角
1、容器和网格系统 容器
container 固定宽度，不同尺寸固定了不同的宽度
container-fluid 100%宽度
栅格系统
变量 （1）可以将属性的值赋值给一个变量，变量为完全的 “常量” ，所以只能定义一次
例如：
@nice-blue: #5B83AD; @light-blue: @nice-blue + #111; #header { color: @light-blue; } 结果
#header { color: #6c94be; } （2）也可以用变量名定义为变量
例如：
@fnord: "I am fnord."; @var: 'fnord'; content: @@var; 结果
content: "I am fnord."; 混合 定义一些通用的属性集为一个class，然后在另一个class中去调用这些属性。任何class, id 或者元素属性集都可以以同样的方式引入
例如：
.bordered { border-top: dotted 1px black; border-bottom: solid 2px black; } #menu a { color: #111; .bordered; } .post a { color: red; .bordered; } 结果
#menu a { color: #111; border-top: dotted 1px black; border-bottom: solid 2px black; } .
开始之前先说说css3的自定义属性，之前我们在写css的时候全部都是使用自身属性，比如margin,padding等。但是你曾是否见过这样的css
:root{ --primary-color:#989898; --light:#fff; --dark:#000; } 其中的–primary-color、–light、–dark就是自定义的属性。
自定义属性的命名规则 --variables-name:variables-value --属性名:属性值 例如定义一个主题颜色： --theme-color:red; 作用域 //:root作用于全局 :root{ --theme-color:red; } //#app作用于id为app的节点内 #app{ --theme-color:red; } 使用方法 var(自定义属性名) //现在全局定义 :root{ --theme-color:red; } //使用的时候 #app{ background-color:var(--theme-color); } //假如我们没有指定--theme-color这个属性，则可以在使用的时候加上替代值 #app{ background-color:var(--theme-color,black);//没有指定--theme-color则会由black代替 } 通过JS获取和设置自定义的属性 //js中获取--theme-color的值 var styles = getComputedStyle(document.documentElement); var value = styles.getPropertyValue("--theme-color"); console.log(value);//red //js中更改--theme-color的值 document.documentElement.style.setProperty("--theme-color","black"); 明白了这几个概念我们开始实现我们的换肤功能：
</span> <html lang="en"> <head> <meta charset="UTF-8"> <title>CSS3自定义属性实现换肤功能title> <style type="text/css"> :root{ --theme-color:#989898; } #header{ width: 100%; height: 50px; line-height: 50px; background-color: var(--theme-color); margin-bottom: 30px; } #header h1{ color: #fff; } button{ width: 100px; height: 30px; color: #fff; border:none; } #btn-red{ --btn-red:red; background-color: var(--btn-red) } #btn-black{ --btn-black:black; background-color: var(--btn-black) } #btn-blue{ --btn-blue:blue; background-color: var(--btn-blue) } style> head> <body> <header id="
web基础知识 前端漏洞：钓鱼、暗链、xss、点击劫持、csrf、url跳转 后端漏洞：sql注入、命令注入、文件上传、文件包含、暴力破解 例子
报文
熟悉状态码
目前流行的网站架构
搭建phpstudy集成软件
在PHPstudy的mySQL中操作SQL语法
创建数据库 CREATE DATABASE my_db;
查看数据库 SHOW databases;
切换数据库 USE my_db;
删除数据库 DROP DATABASE my_db;
TIPS:分号作为语句的结束，程序中会自动补充
web安全基础 常见的安全事件 篡改网页
搜索引擎语法Site:domain(在某个域名或子域名下的网页)+Intitle:keyword(正文中含有关键词的网页)/Intitle:keyword(标题中含有关键词的网页)
exa：keyword为hacked by:时往往能查到自己管理域名下被黑的网站
——————————————————————————————————————————————————————
暗链
优化在搜索引擎里的排名
不是为人准备，是为搜索引擎中的爬虫准备的。
——————————————————————————————————————————————————————
webshell
获得管理权限后->上传webshell=(小/大)马=后门
——————————————————————————————————————————————————————
常见web漏洞
XSS Who stole my keys
概念：黑客通过”html注入”篡改网页，插入了恶意脚本(即xss脚本)，当用户在浏览网页时，实现控制用户浏览器行为的一种攻击方式。
危害：盗取用户信息/钓鱼/制造蠕虫等
三种类型 ：存储型/反射型/DOM型
存储型：攻击代码位置：数据库；输出：HTTP响应
反射型：攻击代码位置：url ；输出：HTTP响应。
DOM型：攻击代码位置：url ；输出：DOM节点。
——存储型演示——
左管理端/右访问端
上传xss脚本
结果
—––反射型演示——
——DOM型演示——
不能通过查看源代码的方式找到xss脚本的位置，通过firebug可以。
在源码中输入hash
总结
——————————————————————————————————————————————————————
CSRF who moved my cheese
概念：利用用户已登陆的身份，在用户毫不知情的情况下，以用户的名义完成非法操作。
如图：
解决办法
在el-dialog标签里添加 :modal-append-to-body=’false’
实现效果：
问题解析 先来看看element-ui官网提供的属性说明文档
文档解释：翻译成大白话就是，若el-dialog弹出框设置了modal-append-to-body=’true’（默认）属性，它的遮罩层就会被插入到body标签下（即与组件所在的最外层div同一层级），知道这个原理就好办了。
问题分析：经过分析源代码可得，el-dialog的显示层和遮罩层都设置了position:fixed，当然显示层的z-index肯定要比遮罩层的大，才能正常的显示弹出框。问题就出在此处，若el-dialog的父级也设置了position:fixed，并且其z-index比弹出框的遮罩层的小（遮罩层处于更高一层），那么弹出框的内容就会被遮罩层所遮挡住了。
经过分析出问题的代码可得出，el-dialog的父级元素确实设置了position:fixed，并且其z-index比弹出框的遮罩层的小，所以就会出现遮罩层把内容挡住的问题。
解决方案
1、给el-dialog设置modal-append-to-body=“false”，使遮罩层插入至 Dialog 的父元素上。（推荐）
2、给position:fixed的父元素设置一个z-index，并且要比遮盖层的大。
3、el-dialog父元素不使用fixed定位。
为了验证这个问题，我特地写了个demo，如下图：
图一：modal-append-to-body=“true”
图二：modal-append-to-body=“false”
(完)
前言 在项目组自己真得是接触了不少东西，今天就来说一说里面的带有PrimeNG制作出来的提示框效果吧。
一、PrimeNG 它是Angular2的一个客户端组件，可以独立于Bootstrap单独使用，也可以结合Bootstrap共同使用。
二、Dialog 使用PRIMENG官网中的解释： Dialog is a container to display content in an overlay window.
三、Angular中的Dialog制作 1.Module文件中添加代码 在myApp.module.ts文件中添加引用 (1)
import {DialogModule} from 'primeng/primeng'; import {ButtonModule} from 'primeng/primeng'; (2)
在@NgModule中import： DialogModule, ButtonModule 2.Component组件中操作 (1)myApp.component.html 添加标签元素
<p-dialog header="提示" [(visible)]="display" modal="modal" width="400" [responsive]="true"> <p style="text-align:center">{{ message}}p> <p-footer> <button type="button" pButton (click)="display=false" label="确定">button> p-footer> p-dialog> (2)myApp.component.ts 在组件myAppComponent类中声明变量
display: boolean = false; message: String = ''; 3.myApp.component.ts(TypeScript)中的具体使用
this.message="请上传音频、视频、图片、文档、pdf、表格格式文件"; //提示信息的内容 this.display=true;//提示框的visible属性为true，显示提示框 四、Dialog效果 小结 Angular中的一些操作语法，与之前所学的HTML、JavaScript有相似之处，也有不同之处，两者联系起来学习会对这块知识的学习有一定的帮助。 感谢您的访问！