实现沟通弹窗的js代码分析
网站里面添加cc客服或者其他的一些沟通软件，如果需要在页面中添加独立沟通代码的（推广落地页中比较普遍），打开新的页面没什么用户体验可言，这时候我们需要点独立沟通链接沟通窗口是弹窗形式的，该怎么做呢？下面跟企业建站小孟一起来看看~
面对这个问题，小孟查询了很多资料，找到两个比较容易实现的方式：
最简单的方式是通过js中的window.open来实现的，只需要在网站<head>之间加一段代码：
完整代码下载地址：https://pan.baidu.com/s/1jNCgiGrGlWrcG6yYRJ3oKw 提取码：fc6m
面对这个问题，小孟查询了很多资料，找到两个比较容易实现的方式：
最简单的方式是通过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的方式。
这段代码里面，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
