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

44次阅读

共计 806 个字符，预计需要花费 3 分钟才能阅读完成。

我在实现客服零碎的过程中，应用 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 很重要，不能允许拖动，否则点击事件不起作用

在惟一客服（http://gofly.v1kf.com)外面，我是在题目上减少了一个切换成英文的按钮，看成果

惟一在线客服零碎
https://gofly.v1kf.com
十年开发教训程序员，到职全心守业中，历时三年开发出的产品《惟一客服零碎》

正文完