提示框函数:anlin.alert(参数1,参数2)

<script>
$(document).ready(function(){
anlin.alert('提示内容');
});
</script>
<button type="button" onclick="anlin.alert('你好！');">点我弹出提示信息</button>

使用参数2,自动消失的提示框

<script>
$(document).ready(function(){
anlin.alert('我会在两秒后消失',2000);
});
</script>
<button type="button" onclick="anlin.alert('我会在三秒后消失',3000);">点我弹出提示信息</button>

弹出层函数:anlin.fs(参数1,{参数2对象})

新建一个层,它会覆盖全屏

<button id="xxbu" type="button">点我开启层</button>
<script>
$('#xxbu').click(function(){
anlin.fs(`<div style="max-width:300px;text-align:center;margin:0 auto;padding:20px;color:#fff;"><font style="font-size:130%;">层的内容</font></div>`,{id:1,bg:'rgba(0,0,0.4)'});
});
</script>

新建一个层,通过id标识关闭层

<button id="xxbu" type="button">点我开启层</button>
<script>
$(document).ready(function(){
var content=`
<div style="max-width:400px;background:#0084ff;padding:10px;height:300px;margin:0 auto;position:relative;">
<span style="position:absolute;font-size:200%;right:10px;top:0px;color:#fff;" onclick="anlin.fs(false,{id:1});">×</span>

<div style="text-align:center;">
<font style="color:#fff;font-size:130%;">点击右上×关闭该层</font>
</div>
</div>
`;
$('#xxbu').click(function(){
anlin.fs(content,{id:1,bg:'rgba(0,0,0,.3)'});
}).click();

});
</script>

层中层:

层的堆叠顺序为:后添加的层会盖住之前的层

<button id="xxbu" type="button">点我开启层</button>
<script>
$('#xxbu').click(function(){
anlin.fs(`<div style="max-width:400px;height:300px;color:#fff;background:#ff0000;padding:20px;margin:0 auto;">
<font style="font-size:130%;">
<button id="xx2" type="button">点我再次添加一个层</button>
<br>
<button type="button" onclick="anlin.fs(false,{id:11});">点我关闭当前层</button>
</font>
</div>`,{id:11,bg:'rgba(0,0,0,.3)'});

$('#xx2').click(function(){
anlin.fs(`<div style="max-width:300px;height:200px;background:#000;color:#fff;padding:20px;margin:0 auto;"><font style="color:#fff;font-size:130%;"><button type="button">第二个层</button>
<br>
<button type="button" onclick="anlin.fs(false,{id:22});">点我关闭当前层</button>
</font></div>`,{id:22,bg:'transparent'});
});

});
</script>

修改层的内容: 当anlin.fs指向相同id时不会继续添加层,而是替换层的内容,替换内容时只有center参数有效

<script>
$(document).ready(function(){

anlin.fs(`<div style="max-width:300px;text-align:center;margin:0 auto;padding:20px;color:#fff;">
<font style="font-size:130%;">层的内容</font><br>
<a id="clic" href="javascript:;" style="color:#c9fff6;">点我修改层的内容</a>
</div>`,{id:888,bg:'rgba(0,0,0.4)'});

$('#clic').click(function(){
anlin.fs(`<div style="max-width:300px;text-align:center;padding:20px;margin:0 auto;color:#ff0000;"><font style="font-size:130%;">修改后的内容</font></div>`,{id:888});
});

});
</script>

使用层自制一个有确认和取消按钮的弹窗

<style>
.tanchuang{overflow:hidden;
transition: box-shadow 0.5s;
   box-shadow:0px 0px 14px 1px rgba(0,0,0,1.00);
max-width:300px;text-align:center;font-size:110%;background:#fff;border:none;border-radius:11px;margin:0 auto;line-height:25px;position:relative;font-weight:bold;}
.tanchuang .con{padding:20px;}
.tanchuang .button{line-height:50px;width:50%;float:left;border-top:1px #e0e0e0 solid;font-size:110%;}
.tanchuang .ok{float:left;display:block;width:100%;color:#0084ff;}
.tanchuang .no{float:left;display:block;width:100%;color:#e0e0e0;border-right:1px #e0e0e0 solid;}
</style>
<button id="xxx" type="button">点我弹出提示</button>
<script>
$('#xxx').click(function(){
anlin.fs(`
<div class="tanchuang">
<div class="con">提示内容</div>
<div class="button">
<span class="no" onclick="anlin.fs(false,{id:'tanchuang'});">取消</span>
</div>
<div class="button">
<span class="ok" onclick="alert('ok');">确认</span>
</div>
</div>
`,{id:'tanchuang'});
});
</script>

anlin.fs()函数会返回一个jquery对象,你可以通过对象操作层的顶级元素,但不推荐通过对象隐藏或删除层,因为默认bg为颜色值时body的滑动条是锁定的,你可以通过anlin.suo();和anlin.jie();来进行锁定body和解锁body

tips:直接使用anlin.fs函数时需要使用jquery的ready()函数: $(document).ready(function(){...js代码});

在下节教程中你将学会怎样给元素或层添加anlinmb内置的css3动画交互,使其提升视觉效果