实现沟通弹窗的js代码分析

作者: seo小孟 分类: 网站制作 发布时间: 2019-10-24 14:41
网站里面添加cc客服或者其他的一些沟通软件,如果需要在页面中添加独立沟通代码的(推广落地页中比较普遍),打开新的页面没什么用户体验可言,这时候我们需要点独立沟通链接沟通窗口是弹窗形式的,该怎么做呢?下面跟企业建站小孟一起来看看~

沟通弹窗代码

面对这个问题,小孟查询了很多资料,找到两个比较容易实现的方式:

最简单的方式是通过js中的window.open来实现的,只需要在网站<head>之间加一段代码:


<script anguage="JavaScript">
function popUp() {
props=window.open('独立沟通代码', 'poppage', 'toolbars=0, scrollbars=0, location=0, statusbars=0, menubars=0, resizable=0, width=窗口的宽度, height=窗口的高度, left = 距离左边距离, top = 距离顶部距离');
}
</script>

这段代码里面,width和height是控制弹窗的宽度和高度的,设置完成后,通过left和top实现窗口是居中还是其他的方式。

完成上面一步之后,还需要在按钮里面添加一段代码:onClick="javascript:popUp()"   这是点击的时候执行我们设置的函数的,这样才能实现弹窗的功能。

比如:<input type=button value="立即咨询" onClick="javascript:popUp()">


是不是很简单,缺点是不方便美化弹窗的样式,小孟提供了下面的一种方法:iframe的方式。


$("#button-box-7").onclick = function () {
Dialog({
title: "欢迎光临**官网",
width: 1100,
iframeContent: {
src: "独立沟通链接",
height: 600
},
showButton: false
});
}

<div id="container">
  <div class="box">
    <p>嵌入 Iframe</p>
    <div class="button-box" >
      <button id="button-box-7" >打开对话框</button>
    </div>
  </div>
  </div>

完整代码下载地址:https://pan.baidu.com/s/1jNCgiGrGlWrcG6yYRJ3oKw     提取码:fc6m 

沟通弹窗 弹窗的js代码

如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!

上一篇:织梦cms限制下载远程图片的尺寸

下一篇:网站制作时畅言评论系统安装说明