layer - 简单好用的Web弹出层组件使用详解3（输入框、图片查看）
七、输入框（prompt）
输入提示框（prompt）弹出后我们可以在里面进行输入，点击确定后可以获取到输入的内容。prompt 提示框除了可以传入基础参数，还可以传入 prompt 专用的属性。
1，基本用法
layer.prompt(function(value, index, elem){
alert(value); //得到value
layer.close(index);
});
2，修改标题、输入框默认值、字符数限制
layer.prompt({
title: "请输入用户名", //提示框标题
value: 'hangge', //初始时的值，默认空字符
maxlength: 10, //可输入文本的最大长度，默认500
},function(value, index, elem){
alert(value); //得到value
layer.close(index);
});
3，密码输入框
layer.prompt({
formType: 1, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
},function(value, index, elem){
alert(value); //得到value
layer.close(index);
});
4，多行文本输入框
layer.prompt({
formType: 2, //输入框类型，支持0（文本）默认1（密码）2（多行文本）
area: ['400px', '100px'] //自定义文本域宽高
},function(value, index, elem){
alert(value); //得到value
layer.close(index);
});
八、相册层（photos）
相册层又称之为图片查看器，主要用于图片的展示。其获取展示图片的方式有如下两种。
1，传入 json 数据
（1）我们可以将整个相册的数据封装成一个 json 对象传入，显示效果如下：
- 整个页面变成黑色背景，同时居中显示相册中的一张图片。
- 鼠标移到图片上时，下方显示该图片的标题。同时两侧显示左右箭头，点击即可切换图片。
- 点击黑色背景，关闭相册弹出层。
（2）代码如下：
//相册的json数据
let json = {
"start": 0, //初始显示的图片序号，默认0
"data": [ //相册包含的图片，数组格式
{
"alt": "图片1标题",
"src": "images/img1.jpg", //原图地址
},
{
"alt": "图片2标题",
"src": "images/img2.jpg", //原图地址
}
]
}
//显示相册图片
layer.photos({
photos: json
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
2，直接读取页面图片
我们也可也直接从页面中获取图片，只需将 photos 属性指向图片的父容器即可。比如下面样例，当我们点击页面上的缩略图时，会弹出显示对应的大图，具体效果同上。
<script>
window.onload = function() {
layer.photos({
photos: '#layer-photos-demo'
,anim: 5 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
});
}
</script>
<div id="layer-photos-demo" class="layer-photos-demo">
<img layer-src="images/img1.jpg" src="images/thumb1.jpg" alt="图片1标题">
<img layer-src="images/img2.png" src="images/thumb2.jpg" alt="图片2标题">
</div>
