CODEWITHSUNDEEP
javascriptjqueryuser-interfacechatlivechat
Sengottaian Karthik
Sengottaian Karthik

Reputation: 398

Pop up widget through script

I am looking forward to create a popup window, see the attached screenshot.

enter image description here

Details: - Anyone can add this pop up to their website using a script, that i will share. - This script/pop up will be later used in the chat application that i am creating

Issues: How do i create this pop up windows script and share this script with other users incase they want to add this pop up to their website.

My question is for the UI part(pop up) and not how the chat will work.

Upvotes: 8

Views: 1975

Answers (2)

Sunil Bharath
Sunil Bharath

Reputation: 206

I am just providing the layout alone which dynamically creates an iframe in an existing html page. using which you can add you contents.

<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>

Upvotes: 2

Himanshi
Himanshi

Reputation: 75

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>

Upvotes: 0

Related Questions