客服弹窗中使用layer库自定义展示的标题 - 网站/网页在线客服源码教程

我在实现客服系统的过程中，使用layer实现右下角弹窗效果，现在需要自定义layer弹窗的标题和增加自定义按钮

代码语言：javascript复制

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)里面，我是在标题上增加了一个切换成英文的按钮，看效果

html

0 人点赞