<meta charset="UTF-8">
    
    <link rel="stylesheet" type="text/css" href="../../codebase/skins/dhtmlxpopup_dhx_skyblue.css"/>
    <link rel="stylesheet" type="text/css" href="../../../dhtmlxForm/codebase/skins/dhtmlxform_dhx_skyblue.css"/>
    <script src="../../codebase/dhtmlxcommon.js"></script>
    <script src="../../codebase/dhtmlxpopup.js"></script>
    <script src="../../../dhtmlxForm/codebase/dhtmlxform.js"></script>
    
    <script>
 
var myPop;
var myPop2;
var myForm;
 
var myIds = {
    "server": "Server to connect to.<br>You can type login@password here and omit them in following inputs.",
    "name": "Your login to the remote FTP.<br>Make sure a user is created.",
    "pwd": "Your password on remote FTP server.<br>Keep it in safe place!",
    "secure": "Try app to connect via sFTP.<br>If not supported default connection will opened."
};
 
function showPopup(inp) {
    if (!myPop) {
        myPop = new dhtmlXPopup({
            mode: "right"
        });
        myForm = myPop.attachForm([{
            type: "block",
            style: "margin: 10px 20px 10px 0px;",
            list: [{
                type: "settings",
                position: "label-left",
                labelWidth: 130,
                inputWidth: 135
            }, {
                type: "input",
                name: "server",
                label: "FTP Server",
                value: "ftp://ftp.server.com/"
            }, {
                type: "input",
                name: "name",
                label: "Login",
                value: "username"
            }, {
                type: "password",
                name: "pwd",
                label: "Password",
                value: "12345"
            }, {
                type: "checkbox",
                name: "secure",
                label: "Secure Connection",
                value: "1",
                checked: true
            }, {
                type: "button",
                name: "proceed",
                value: "Connect",
                offsetTop: 10,
                offsetLeft: 165
            }]
            }]);
        myForm.attachEvent("onFocus", function(name) {
            if (!myIds[name])
                return;
            if (!myPop2) {
                var id2 = [];
                for (var a in myIds)
                    id2.push(a);
                myPop2 = new dhtmlXPopup({
                    form: myForm,
                    id: id2
                });
            }
            myPop2.attachHTML("<div style='margin: 5px 10px;'>" + myIds[name] + "</div>");
            myPop2.show(name);
        });
        myForm.attachEvent("onBlur", function(name) {
            if (myPop2)
                myPop2.hide();
        });
        myForm.attachEvent("onButtonClick", function(name) {
            if (name == "proceed") {
                myPop.hide();
                return;
            }
        });
    }
    if (myPop.isVisible()) {
        myPop.hide();
    } else {
        var x = getAbsoluteLeft(inp);
        var y = getAbsoluteTop(inp);
        var w = inp.offsetWidth;
        var h = inp.offsetHeight;
        myPop.show(x, y, w, h);
    }
}</script>
 
 
    <div style="padding: 120px 10px;">
        <input type="button" onclick="showPopup(this);" value="Show Popup">
    </div>