web弹层组件早已不是web开发的新鲜事物了，国内外也不乏众多优秀的弹层组件，不过这并不影响HLayer的正常维护与发布，HLayer的目标就是成为一个简洁、高效、无依赖、现代的弹层组件，她包罗万象却简单小巧，如果你正在做一个web项目，不仿试着引入HLayer去加快产品研发的速度，去快速验证自己的想法，相信HLayer会让你印象深刻。当然，如果HLayer真的能够助力你的web开发，不仿为她点个star。
HLayer被定位为一个简洁、无依赖的前端弹层组件，使用起来非常简单，你只需要将hlayer.js和hlayer.css文件引入到你的项目中，便可开始使用。
- <link rel="stylesheet" href="hlayer/hlayer.css">
- <link type="text/javascript" src="hlayer/hlayer.js">
引入之后你可以不传入参数，直接调用内置的方法，HLayer.js已经为每种方法配置了基本的参数，如下：
- hlayer.msg();
- hlayer.alert();
- hlayer.loading();
- hlayer.iframe();
- hlayer.prompt();
在大多数情况下，你需要的仅仅是改变一下HLayer.js弹出框的文字，此时你可以配置参数对象的title和text属性，如下：
- hlayer.msg({
- text:'疯狂提示中'
- });
- hlayer.alert({
- text:'真是一个好听的名字'
- });
- hlayer.alert({
- title:'我是配置信息'
- });
- hlayer.tips({
- text:'你真是太聪明了'
- });
或许有时候你觉得简单枯燥的文字并不能完全展示自己，你还可以通过icon属性为你的文字添加图标，通过animateType来定义弹出框的显示动画，HLayer.js已经内置了8种icon和9种动画，你只需要指定相应的数字代号即可，如下：
- hlayer.alert({
- text:'疯狂提示中',
- icon：1
- });
- hlayer.alert({
- text:'真是一个好听的名字',
- icon:8
- });
- hlayer.tips({
- animateType:3,
- text:'小tips'
- });
- hlayer.tips({
- animateType:5,
- text:'我是萌萌哒'
- });
你还可以通过position属性来配置弹出框在页面的位置，HLayer.js已经内置了7种弹出框的位置，当然如果你还需要更加个性一点，你可以将其设置为字符串random，这样弹出框的位置将会是随机的，不过对于hlayer.tips()方法是利用tipsPosition属性来配置的，通过值left、top、bottom、right来设置tips位置，如下：
- hlayer.prompt({
- position：0
- });
- hlayer.alert({
- position：6
- });
- hlayer.msg({
- text：'位置随机的提示框',
- position：'random'
- });
- hlayer.tips({
- tipsPosition:'top',
- text:'尼玛，竟然从上面出来'
- });
或许你还觉得修改一下弹出框的配色来搭配一下你的项目，此时你可以通过mainBg、mainColor、contentBg、contentColor四个属性来配置弹出框的配色，如下：
- hlayer.msg({
- contentBg：'#B10C0C',
- contentColor：'#fff'
- });
- hlayer.alert({
- mainBg:'#033e92',
- mainColor:'#ef0484'
- });
- hlayer.alert({
- mainBg:'#333',
- mainColor:'#333',
- contentBg：'#757272',
- contentColor：'#eee'
- });
在很多情况下你的弹出框仅仅是一个提示，并不想打扰用户当前的工作，你可以通过设置time属性和shadow属性来设置弹出框存在的时间和是否需要阴影，如下：
- hlayer.photo({
- photos：[{
- img:'img/1.jpg',
- text:'不能说的秘密'
- }],
- time:2000
- });
- hlayer.msg({
- text:'被你发现了',
- shadow:false
- });
此外，针对不同弹出框的特性，有些属性则是专门针对某个方法的，如hlayer.loading()方法中的loadingType属性，hlayer.prompt()方法中的formType属性，hlayer.iframe中的url属性，如下：
- hlayer.loading({
- loadingType：2
- });
- hlayer.iframe({
- url:'https://www.google.com',
- width:'1200px',
- height:'500px'
- });
- hlayer.prompt({
- formType:3,
- width:'500px',
- height:'350px'
- });
HLayer.js使用起来非常简单，相信通过以上示例的展示，你已经能够开始使用HLayer.js了，那接下来将为你展示HLayer.js的所有方法的完整参数。
hlayer.msg()可配置参数如下：
- {
- contentBg: String //内容背景颜色，默认为#fff
- contentColor:String //内容文字颜色，默认为#000
- animateType:Number //动画类型，可选1~9默认为#000
- position:Number OR 'random' //位置类型，可选0~6或者字符串random，random意为位置随机，默认0
- shadow：Bollean //是否需要遮罩层，默认为true
- resize：Bollean //窗口调整时是否自动调整弹出框位置，默认为true
- icon：Number //图标类型，可选1~8默认没有即false
- text：String //文字内容，默认为”提示信息“
- width：String //弹出框宽度，默认为自动
- height：String //文字内容，默认为50px
- time：Number //弹出框显示时间，以毫秒计，默认为2000，为false时意为不自动关闭
- }
hlayer.alert()可配置参数如下：
- {
- contentBg: String //内容背景颜色，默认为#fff
- contentColor:String //内容文字颜色，默认为#000
- animateType:Number //动画类型，可选1~9默认为1
- position:Number OR 'random' //位置类型，可选0~6或者字符串random，random意为位置随机，默认0
- shadow：Bollean //是否需要遮罩层，默认为true
- resize：Bollean //窗口调整时是否自动调整弹出框位置，默认为true
- icon：Number //图标类型，可选1~8默认没有即false
- text：String //文字内容，默认为”提示信息“
- width：String //弹出框宽度，默认为260px
- height：String //文字内容，默认为148px
- time：Number //弹出框显示时间，以毫秒计，默认为false时意为不自动关闭
- mainBg: String //标题背景颜色，默认为#169FE6
- mainColor: String //标题文字颜色，默认为#fff
- title: String //标题内容，默认为提示
- closeBtnBollean //是否需要关闭按钮，默认true
- moveBollean //是允许拖动弹出框，默认true
- confirmBtnBollean //是允许需要确定按钮，默认true
- confirmCbFunction //点击确定按钮时的回调函数，默认为false，即无反应，当为字符串close时意为关闭
- cancelBtnBollean //是允许需要取消按钮，默认false
- btnArray //用于自定义按钮，这是一个由按钮文字组成的字符串
- btnCbArray //用于自定义按钮的回调函数，这是一个由函数组成的字符串
- }
hlayer.loading()可配置参数如下：
- {
- animateType:Number //动画类型，可选1~9默认为#000
- position:Number OR 'random' //位置类型，可选0~6或者字符串random，random意为位置随机，默认0
- shadow：Bollean //是否需要遮罩层，默认为false
- resize：Bollean //窗口调整时是否自动调整弹出框位置，默认为true
- time：Number //弹出框显示时间，以毫秒计，默认为2000
- loadingType：Number //加载层的类型，可选1~4，默认为1
- loadingColor：String //加载层的颜色，默认为#169fe6
- }
hlayer.iframe()可配置参数如下：
- {
- animateType:Number //动画类型，可选1~9默认为#000
- position:Number OR 'random' //位置类型，可选0~6或者字符串random，random意为位置随机，默认0
- shadow：Bollean //是否需要遮罩层，默认为true
- resize：Bollean //窗口调整时是否自动调整弹出框位置，默认为true
- width：String //弹出框宽度，默认为700px
- height：String //文字内容，默认为500px
- time：Number //弹出框显示时间，以毫秒计，默认为false时意为不自动关闭
- mainBg: String //标题背景颜色，默认为#169FE6
- mainColor: String //标题文字颜色，默认为#fff
- title: String //标题内容，默认为提示
- closeBtnBollean //是否需要关闭按钮，默认true
- moveBollean //是允许拖动弹出框，默认true
- urlString //iframe的URL地址，默认为HLayer.js的主页
- }
hlayer.alert()可配置参数如下：
- {
- contentBg: String //内容背景颜色，默认为#fff
- contentColor:String //内容文字颜色，默认为#000
- animateType:Number //动画类型，可选1~9默认为#000
- position:Number OR 'random' //位置类型，可选0~6或者字符串random，random意为位置随机，默认0
- shadow：Bollean //是否需要遮罩层，默认为true
- resize：Bollean //窗口调整时是否自动调整弹出框位置，默认为true
- text：String //文字内容，默认为”提示信息“
- width：String //弹出框宽度，默认为260px
- height：String //文字内容，默认为148px
- time：Number //弹出框显示时间，以毫秒计，默认为false时意为不自动关闭
- mainBg: String //标题背景颜色，默认为#169FE6
- mainColor: String //标题文字颜色，默认为#fff
- title: String //标题内容，默认为提示
- closeBtnBollean //是否需要关闭按钮，默认true
- moveBollean //是允许拖动弹出框，默认true
- confirmBtnBollean //是允许需要确定按钮，默认true
- confirmCbFunction //点击确定按钮时的回调函数，默认为false，即无反应，当为字符串close时意为关闭
- cancelBtnBollean //是允许需要取消按钮，默认false
- btnArray //用于自定义按钮，这是一个由按钮文字组成的字符串
- btnCbArray //用于自定义按钮的回调函数，这是一个由函数组成的字符串
- formTypeNumber //prompt的类型，可选1~5，默认为1
- optionsObject //这个值只有formType为4和5时起作用，name属性为input标签的name属性，inputs意为单选或多选框的值
- allowEmptyBollean //是否允许为空，默认为true
- }
hlayer.photo()可配置参数如下：
- {
- animateType:Number //动画类型，可选1~9默认为#000
- position:Number OR 'random' //位置类型，可选0~6或者字符串random，random意为位置随机，默认0
- shadow：Bollean //是否需要遮罩层，默认为true
- resize：Bollean //窗口调整时是否自动调整弹出框位置，默认为true
- autoPlay: Boolean //是否自动播放，默认为false
- playTime: Number //自动切换的时间，以毫秒计，默认为5000
- photos: Array //以对象组成的数组，img属性意为相册的图片地址，text属性意为相册图片说明
- }
hlayer.tips()可配置参数如下：
- {
- contentBg: String //内容背景颜色，默认为#fff
- contentColor:String //内容文字颜色，默认为#000
- animateType:Number //动画类型，可选1~9默认为3
- icon：Number //图标类型，可选1~8默认没有即false
- text：String //文字内容，默认为”提示信息“
- width：String //弹出框宽度，默认为auto
- height：String //文字内容，默认为40px
- time：Number //弹出框显示时间，以毫秒计，默认为100，为false时意为不自动关闭
- position：String //left、top、right、bottom四个可选，默认为right
- }
hlayer.alert()可配置参数如下：
- {
- contentBg: String //内容背景颜色，默认为#fff
- contentColor:String //内容文字颜色，默认为#000
- animateType:Number //动画类型，可选1~9默认为1
- position:Number OR 'random' //位置类型，可选0~6或者字符串random，random意为位置随机，默认0
- shadow：Bollean //是否需要遮罩层，默认为true
- resize：Bollean //窗口调整时是否自动调整弹出框位置，默认为true
- time：Number //弹出框显示时间，以毫秒计，默认为false时意为不自动关闭
- mainBg: String //标题背景颜色，默认为#169FE6
- mainColor: String //标题文字颜色，默认为#fff
- title: String //标题内容，默认为提示
- closeBtnBollean //是否需要关闭按钮，默认true
- moveBollean //是允许拖动弹出框，默认true
- photosString //音乐图片地址
- urlString OR Array //音乐地址，可以是字符串或者由字符串组成的数组，使用数组是为了兼容各个浏览器
- autoPlayBollean //是否自动播放，默认为true
- }
HLayer.js使用起来非常简单，相信通过以上示例的展示，你已经能够开始使用HLayer.js了，那接下来将为你展示HLayer.js的所有方法的完整参数。
hlayer.msg()可配置参数如下：
- {
- contentBg: String //内容背景颜色，默认为#fff
- contentColor:String //内容文字颜色，默认为#000
- animateType:Number //动画类型，可选1~9默认为#000
- position:Number OR 'random' //位置类型，可选0~6或者字符串random，random意为位置随机，默认0
- shadow：Bollean //是否需要遮罩层，默认为true
- resize：Bollean //窗口调整时是否自动调整弹出框位置，默认为true
- icon：Number //图标类型，可选1~8默认没有即false
- text：String //文字内容，默认为”提示信息“
- width：String //弹出框宽度，默认为自动
- height：String //文字内容，默认为50px
- time：Number //弹出框显示时间，以毫秒计，默认为2000，为false时意为不自动关闭
- }
hlayer.alert()可配置参数如下：
- {
- contentBg: String //内容背景颜色，默认为#fff
- contentColor:String //内容文字颜色，默认为#000
- animateType:Number //动画类型，可选1~9默认为1
- position:Number OR 'random' //位置类型，可选0~6或者字符串random，random意为位置随机，默认0
- shadow：Bollean //是否需要遮罩层，默认为true
- resize：Bollean //窗口调整时是否自动调整弹出框位置，默认为true
- icon：Number //图标类型，可选1~8默认没有即false
- text：String //文字内容，默认为”提示信息“
- width：String //弹出框宽度，默认为260px
- height：String //文字内容，默认为148px
- time：Number //弹出框显示时间，以毫秒计，默认为false时意为不自动关闭
- mainBg: String //标题背景颜色，默认为#169FE6
- mainColor: String //标题文字颜色，默认为#fff
- title: String //标题内容，默认为提示
- closeBtnBollean //是否需要关闭按钮，默认true
- moveBollean //是允许拖动弹出框，默认true
- confirmBtnBollean //是允许需要确定按钮，默认true
- confirmCbFunction //点击确定按钮时的回调函数，默认为false，即无反应，当为字符串close时意为关闭
- cancelBtnBollean //是允许需要取消按钮，默认false
- btnArray //用于自定义按钮，这是一个由按钮文字组成的字符串
- btnCbArray //用于自定义按钮的回调函数，这是一个由函数组成的字符串
- }
hlayer.loading()可配置参数如下：
- {
- animateType:Number //动画类型，可选1~9默认为#000
- position:Number OR 'random' //位置类型，可选0~6或者字符串random，random意为位置随机，默认0
- shadow：Bollean //是否需要遮罩层，默认为false
- resize：Bollean //窗口调整时是否自动调整弹出框位置，默认为true
- time：Number //弹出框显示时间，以毫秒计，默认为2000
- loadingType：Number //加载层的类型，可选1~4，默认为1
- loadingColor：String //加载层的颜色，默认为#169fe6
- }
hlayer.iframe()可配置参数如下：
- {
- animateType:Number //动画类型，可选1~9默认为#000
- position:Number OR 'random' //位置类型，可选0~6或者字符串random，random意为位置随机，默认0
- shadow：Bollean //是否需要遮罩层，默认为true
- resize：Bollean //窗口调整时是否自动调整弹出框位置，默认为true
- width：String //弹出框宽度，默认为700px
- height：String //文字内容，默认为500px
- time：Number //弹出框显示时间，以毫秒计，默认为false时意为不自动关闭
- mainBg: String //标题背景颜色，默认为#169FE6
- mainColor: String //标题文字颜色，默认为#fff
- title: String //标题内容，默认为提示
- closeBtnBollean //是否需要关闭按钮，默认true
- moveBollean //是允许拖动弹出框，默认true
- urlString //iframe的URL地址，默认为HLayer.js的主页
- }
hlayer.prompt()可配置参数如下：
- {
- contentBg: String //内容背景颜色，默认为#fff
- contentColor:String //内容文字颜色，默认为#000
- animateType:Number //动画类型，可选1~9默认为#000
- position:Number OR 'random' //位置类型，可选0~6或者字符串random，random意为位置随机，默认0
- shadow：Bollean //是否需要遮罩层，默认为true
- resize：Bollean //窗口调整时是否自动调整弹出框位置，默认为true
- text：String //文字内容，默认为”提示信息“
- width：String //弹出框宽度，默认为260px
- height：String //文字内容，默认为148px
- time：Number //弹出框显示时间，以毫秒计，默认为false时意为不自动关闭
- mainBg: String //标题背景颜色，默认为#169FE6
- mainColor: String //标题文字颜色，默认为#fff
- title: String //标题内容，默认为提示
- closeBtnBollean //是否需要关闭按钮，默认true
- moveBollean //是允许拖动弹出框，默认true
- confirmBtnBollean //是允许需要确定按钮，默认true
- confirmCbFunction //点击确定按钮时的回调函数，默认为false，即无反应，当为字符串close时意为关闭
- cancelBtnBollean //是允许需要取消按钮，默认false
- btnArray //用于自定义按钮，这是一个由按钮文字组成的字符串
- btnCbArray //用于自定义按钮的回调函数，这是一个由函数组成的字符串
- formTypeNumber //prompt的类型，可选1~5，默认为1
- optionsObject //这个值只有formType为4和5时起作用，name属性为input标签的name属性，inputs意为单选或多选框的值
- allowEmptyBollean //是否允许为空，默认为true
- }
hlayer.photo()可配置参数如下：
- {
- animateType:Number //动画类型，可选1~9默认为#000
- position:Number OR 'random' //位置类型，可选0~6或者字符串random，random意为位置随机，默认0
- shadow：Bollean //是否需要遮罩层，默认为true
- resize：Bollean //窗口调整时是否自动调整弹出框位置，默认为true
- autoPlay: Boolean //是否自动播放，默认为false
- playTime: Number //自动切换的时间，以毫秒计，默认为5000
- photos: Array //以对象组成的数组，img属性意为相册的图片地址，text属性意为相册图片说明
- }
hlayer.tips()可配置参数如下：
- {
- contentBg: String //内容背景颜色，默认为#fff
- contentColor:String //内容文字颜色，默认为#000
- animateType:Number //动画类型，可选1~9默认为3
- icon：Number //图标类型，可选1~8默认没有即false
- text：String //文字内容，默认为”提示信息“
- width：String //弹出框宽度，默认为auto
- height：String //文字内容，默认为40px
- time：Number //弹出框显示时间，以毫秒计，默认为100，为false时意为不自动关闭
- position：String //left、top、right、bottom四个可选，默认为right
- }
hlayer.alert()可配置参数如下：
- {
- contentBg: String //内容背景颜色，默认为#fff
- contentColor:String //内容文字颜色，默认为#000
- animateType:Number //动画类型，可选1~9默认为1
- position:Number OR 'random' //位置类型，可选0~6或者字符串random，random意为位置随机，默认0
- shadow：Bollean //是否需要遮罩层，默认为true
- resize：Bollean //窗口调整时是否自动调整弹出框位置，默认为true
- time：Number //弹出框显示时间，以毫秒计，默认为false时意为不自动关闭
- mainBg: String //标题背景颜色，默认为#169FE6
- mainColor: String //标题文字颜色，默认为#fff
- title: String //标题内容，默认为提示
- closeBtnBollean //是否需要关闭按钮，默认true
- moveBollean //是允许拖动弹出框，默认true
- photosString //音乐图片地址
- urlString OR Array //音乐地址，可以是字符串或者由字符串组成的数组，使用数组是为了兼容各个浏览器
- autoPlayBollean //是否自动播放，默认为true
- }