我在实现客服系统的过程中,使用layer实现右下角弹窗效果,现在需要自定义layer弹窗的标题和增加自定义按钮
layer.open({ type: 2, title: 'My Window<button class="btn btn-primary" id="btn-reload">Reload</button>', // 在标题中加入按钮 shadeClose: true, shade: 0.8, move:false,//不允许拖动,很重要 area: ['380px', '90%'], offset: 'rb', // 右下角弹出 content: 'http://www.your-site.com/html/window.html', success: function(layero, index){ // 弹窗加载成功时的回调 var iframe = layero.find('iframe'); // 获取到弹窗中的iframe元素 var btnReload = layero.find('#btn-reload'); // 获取到按钮 btnReload.click(function(){ iframe.attr('src', iframe.attr('src')); // 重新加载iframe的内容 });
在这个例子中,我在自定义标题里面增加了一个按钮,实现点击重新加载弹窗内容的效果
我们使用了jQuery的click()方法来处理按钮的点击事件。在按钮的回调函数中,我们使用了iframe的attr()方法来重新设置src属性,从而重新加载iframe的内容。
这个里面move:false很重要,不能允许拖动,否则点击事件不起作用
在唯一客服(gofly.v1kf.com)里面,我是在标题上增加了一个切换成英文的按钮,看效果
标签:layer,自定义,客服,源码,iframe,按钮,弹窗 From: https://www.cnblogs.com/taoshihan/p/17031751.html