如何在元素上显示提示框或者实现弹窗提示

今天要实现一个如果输入错误就提示正确答案的需求，最开始的想法是直接在原输入框显示正确答案，但是这样很丑陋，但是又因为这个项目主要的功能和界面已经写好，我只是负责维护和进行小的修改，所以想了想如何实现在原输入框错误的情况下弹框或者别的弹框方式。

一开始经过查询，在网上找到了这样效果

但是这种是纯CSS实现的，实现的手法还有一点复杂，对于我想要快速实现维护的需求不是那么贴合，但是有想要纯手动实现的方法可以去菜鸟联盟demo看看，有详细的实现手法。

于是乎我就想找寻另外的解决方法，这时我突然想起项目中别的功能有提示功能，于是前去研究发现有这样的一段代码

layer.tips("不正确",
			this, {
				tips : 1
					})

实现的效果就是本文刚开始在想要的元素上提示效果，但是看起来的效果会更加轻量化一点。于是去思考了一下layer这个函数，经过了解原来是layui库里面的一个函数，只要下载layui下来并在项目里引用就可以使用了。

那么接下来就是考虑如何将这个库引入项目中，并投入实践，因为现在维护的项目里本身是不存在这个库的。

首先我是去他的官网上直接下载这个包   下载地址

然后解压之后将包复制到我需要的目录下

刚导入进来的时候图标上会有一个问号，但是不会影响执行和编译。

接下来就是在所需要的文件中导入这个库

直接加入如下代码

<link rel="stylesheet" href="typing/layui/css/layui.css">
    <script src="typing/layui/layui.js"></script>

当然注意路径要写对，路径的几种写法我就不多说了，各位可以自行上网查看一下。

如果这里不引入这两个的话，最后会产生layer is not defined的错误，导致函数无法使用。

剩下的代码就在js里实现

一开始我是这样写的

layer.open({
			    title:['正确答案','text-align:left;'],
			    	content:answer
			    	  });

执行的时候依然会报错layer is not defined，百思不得其解的情况下还是去看了官方文档，果然看官方文档才是对程序员最有效的学习和使用方式。

官方文档中是这样写明的，虽然我在原本的项目代码中没看到他将需要用到的模块实现use一下就可以使用，在这里却不行，这个问题现在还没有想清楚，希望有明白的大神可以评论指导我一下，但是为了快速满足公司的需求，我还是按照官方文档的方法加入了use函数

最后代码如下

layui.use(['layer'],function(){
			    		  var layer=layui.layer;
			    		  layer.open({
			    			  title:['正确答案','text-align:left;'],
			    			  content:answer
			    		  });
			    	  });

解释一下代码就是title['文本','样式']，也就是说title和content中是可以添加自己想要的样式的，只要用数组扩起来，第一个是文本，第二位是样式代码。

最终实现的效果就是

感觉看起来特别的简介扁平化和轻量化，很符合现在年轻人的审美。

这也算是一篇记录我与layui初识的过程吧，通过这次了解多了一个ui库，而不是一直使用之前的boottrap，对于web前端的快速开发有了不小的提高，官网说这个框架也是适用于服务端的，但是服务端我还没接触，所以想要详细了解这个库的同学可以去看看哦。