2016-02-15 21 views
7

Ich freue mich auf ein Popup-Fenster erstellen, siehe den beigefügten Screenshot.Pop-up-Widget durch Skript

enter image description here

Details: - Wer diesen Pop hinzufügen kann bis zu ihrer Website mit einem Skript, das ich teilen. - Dieses Skript/Pop-up wird später in der Chat-Anwendung verwendet werden, die i

Fragen erschaffe: Wie erstelle ich dieses Pop-Fenster Skript und das Skript mit anderen Benutzern teilen einhüllen sie diese hinzufügen möchten Pop-up auf ihrer Website.

Meine Frage ist für den UI-Teil (Pop-Up) und nicht, wie der Chat funktioniert.

+0

Zuerst Skript und veröffentlichen Sie es auf Ihrer Website dann geben Sie Ihren Link oder eine HTML erstellen und erzählen Sie Ihren Benutzern angegebenen URL iframe von Ihnen – jackjop

Antwort

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

Wenn man sich solche Chat-Widgets wie Zopim etc schreiben, geben die Unternehmen, die Sie Nur Widget-Link und nicht vollständiger HTML-Stil zum Einbinden auf die Seite. Wie kann ich ein solches Skript erstellen, um es mit anderen wie Zopim zu teilen? –

1

Ich reiche nur das Layout allein die dynamisch ein iframe in eine bestehende HTML-Seite erstellt. mit dem Sie Ihren Inhalt hinzufügen können.

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

Ich bin auf der Suche nach einem Skript, mit dem ich dieses Popup auf einer anderen Website verweisen kann. Die Website, auf der das Popup angezeigt wird, hat nur einen Skriptlink. Genau wie Zopim, um Zopim auf Ihrer Website zu integrieren, müssen Sie dort Skript auf Ihrer Website einfügen, durch die popup erzeugt wird –

+0

Ich denke, was @sunil bedeutete, dass das Skript nur ein "iframe" mit Ihrer app URL öffnen (zopim verwendet 'iframe 'auch). –