1.经典模块化前端框架LayUI
导包
在上面链接下载之后,引入layui的包:
引包
<link rel="stylesheet" href="<%=path%>/layui/css/layui.css" media="all">
<script src="<%=path%>/layui/layui.js" charset="utf-8"></script>
2.警告框弹出
layui.use('layer', function()
{
var $ = layui.jquery, layer = layui.layer;
//触发事件
var active = {
notice: function(){
//弹出一个警告公式框
layer.open({
type: 1
,title: false //不显示标题栏
,closeBtn: false
,area: '300px;'
,shade: 0.8
,id: 'LAY_layuipro' //设定一个id,防止重复弹出
,btn: ['OK']
,btnAlign: 'c'
,moveType: 1 //拖拽模式,0或者1
,content: '<div style="padding: 50px; line-height: 22px; background-color: #393D49; color: #fff; font-weight: 300;">安全警告!</div>'
,success: function(layero){
var btn = layero.find('.layui-layer-btn');
btn.find('.layui-layer-btn0').attr({
target: '_blank'
});
}
});
}
};
//点击按钮button,实现响应
$('#layerDemo .layui-btn').on('click', function(){
var othis = $(this), method = othis.data('method');
active[method] ? active[method].call(this, othis) : '';
});
});
-
#layerDemo
为button所在的div 中的id号id="layerDemo"
-
.layui-btn
为<button>
中的class号class="layui-btn"
<div class="site-demo-button" id="layerDemo" >
<button name = "butt_submit" data-method="notice" class="layui-btn" >提交</button>
</div>