Question

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

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

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

我的问题是UI部分（弹出窗口），而不是聊天的工作方式。

Answer 1

我只提供单独的布局，在现有的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>

Answer 2

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>

通过脚本弹出小部件

2 个答案: