当前位置: 首页 - 编程技术 - 文章正文

经典模块化前端框架LayUI——实现警告框弹出

xiaoqihv
1.经典模块化前端框架LayUI

https://www.layui.com/

导包

在上面链接下载之后,引入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>
文章地址:https://wenmayi.cn/post/648.html