Popup inside popup

</> Source
<!DOCTYPE html>
<html>
<head>
	<title>Popup inside popup</title>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/fonts/font_roboto/roboto.css"/>
	<link rel="stylesheet" type="text/css" href="../../../codebase/dhtmlx.css"/>
	<script src="../../../codebase/dhtmlx.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: 150},
						{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 = dhx4.absLeft(inp);
				var y = dhx4.absTop(inp);
				var w = inp.offsetWidth;
				var h = inp.offsetHeight;
				myPop.show(x,y,w,h);
			}
		}

	</script>
</head>
<body>
	<div style="padding: 120px 10px;">
		<input type="button" onclick="showPopup(this);" value="Show Popup">
	</div>
</body>
</html>
Documentation

Check documentation to learn how to use the components and easily implement them in your applications.