通过脚本弹出小部件答案

【问题标题】：Pop up widget through script通过脚本弹出小部件
【发布时间】：2016-05-25 23:51:24
【问题描述】：

我期待创建一个弹出窗口，请参阅随附的屏幕截图。

详情： - 任何人都可以使用脚本将此弹出窗口添加到他们的网站，我将分享。 - 此脚本/弹出窗口稍后将在我正在创建的聊天应用程序中使用

问题： 我如何创建此弹出窗口脚本并与其他用户共享此脚本，以防他们想将此弹出窗口添加到他们的网站。

我的问题是关于 UI 部分（弹出）而不是聊天如何工作。

【问题讨论】：

首先您编写脚本并将其发布在您的网站上，然后提供您的链接或创建一个 html 并告诉您的用户到 iframe 给定的 URL 由您
嗨，Karthick，我正在为您遇到的同样问题寻找解决方案。你有什么解决办法吗？如果有请分享...

标签： javascript jquery user-interface chat livechat

【解决方案1】：

here is a basic popup I've create for Login:

xyz.js

$(document).ready(function() {
    loginDialog = $( "#loginDialog" ).dialog({
        autoOpen: false,
        title: "Login Form ",
        height: 300,
        width: 450,
        modal: true,
    });
});

function loginPopup(){
    loginDialog.dialog( "open" );
}

function popupEvent(action){
    if(action=="login"){
        customerLogin();
        loginDialog.dialog( "close" );

    }else if(action=="close"){
        loginDialog.dialog( "close" );
    }

}

ABC.jsp

<a onclick="loginPopup();"> Login</a>

<div id="loginDialog" title="Basic dialog">
    <form id="customerLoginData">
        Email :<input type="text" name="customerEmail" />
        Password: <input type="password" name="customerPassword" />
<a id="popupLogin" onclick="popupEvent('login');"> click to Login </a>

        </form>
       </div>

【讨论】：

如果您查看像 Zopim 等这样的聊天小部件，这些公司只会为您提供小部件链接，而不是完整的 HTML 样式以包含在页面上。如何创建这样的脚本以与 Zopim 等其他人分享？

【解决方案2】：

我只是单独提供在现有 html 页面中动态创建 iframe 的布局。使用它你可以添加你的内容。

<html>
<head>
</head>
<body>
</body>
<script>
var ifrm = document.createElement("iframe");
ifrm.style="width: 280px; max-height: 100%; height: 338px; position: fixed; bottom: 0px; right: 3px; text-align: left; z-index: 2147483647; border: 0px none; border-radius: 4px 4px 0px 0px; box-shadow: 0px 0px 5px  rgb(51, 51, 51);";
document.body.appendChild(ifrm);
</script>    
</html>

【讨论】：

我正在寻找一个脚本，通过它我可以在其他网站上引用此弹出窗口。因此显示弹出窗口的网站将只有脚本链接。就像 Zopim 一样，要将 zopim 集成到您的网站上，您需要在您的网站上插入脚本，通过该脚本生成弹出窗口
我认为@sunil 的意思是该脚本仅使用您的应用 URL 打开一个 iframe（zopim 也使用 iframe）。