Bootstrap Modal彈窗中輸入框選擇的內容是樹(ZTree)的節點

注意

調用Bootstrap的模態框的時候，JQ獲取到的位置是相對於當前內容區域的位置

代碼

<div id="registerNetModal" class="modal fade" tabindex="-1" >
	...
	<div class="f-mt20"><h4>關聯信息：</h4><hr class="line"> </div>
	<div class="flex">
		<div class="f-fl f-mr15">
			<label for="" class="w105 f-ib"><span class="red">*</span> 歸屬站點：</label>
			<input type="text" id="treeInfo" class="u-input input240 f-mr15 " placeholder="">
			<button id="menuBtn" class="u-btn normal selectInfo" title="選擇">選擇</button>
			<span class="s-tip lt80"></span>
		</div>
		<div id="menuContent" class="menuContent"
			style="display:none; position: absolute;z-index: 1200;background-color: rgb(4, 66, 144);box-shadow: 0 0 15px rgba(0,0,0,0.1);">
			<ul id="treeDemo" class="ztree" style="margin-top:0; width:240px;height: 180px;overflow-y: auto;"></ul>
		</div>
	</div>
	...
</div>

	var setting = {
		check: {
			enable: true,
			chkStyle: "radio",
			radioType: "all"
		},
		view: {
			dblClickExpand: false
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			// beforeCheck: beforeCheck,
			onCheck: onCheck
		}
	};

	var zNodes = [
		{ id: 1, pId: 0, name: "北京" },
		{ id: 2, pId: 0, name: "天津" },
		{ id: 3, pId: 0, name: "上海" },
		{ id: 6, pId: 0, name: "重慶" },
		{ id: 4, pId: 0, name: "河北省", open: true, nocheck: true },
		{ id: 41, pId: 4, name: "石家莊" },
		{ id: 42, pId: 4, name: "保定" },
		{ id: 43, pId: 4, name: "邯鄲" },
		{ id: 44, pId: 4, name: "承德" },
		{ id: 5, pId: 0, name: "廣東省", open: true, nocheck: true },
		{ id: 51, pId: 5, name: "廣州" },
		{ id: 52, pId: 5, name: "深圳" },
		{ id: 53, pId: 5, name: "東莞" },
		{ id: 54, pId: 5, name: "佛山" },
		{ id: 6, pId: 0, name: "福建省", open: true, nocheck: true },
		{ id: 61, pId: 6, name: "福州" },
		{ id: 62, pId: 6, name: "廈門" },
		{ id: 63, pId: 6, name: "泉州" },
		{ id: 64, pId: 6, name: "三明" }
	];

	function beforeCheck(treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo");
		zTree.checkNode(treeNode, !treeNode.checked, null, true);
		return false;
	}

	function onCheck(e, treeId, treeNode) {
		var zTree = $.fn.zTree.getZTreeObj("treeDemo"),
			nodes = zTree.getCheckedNodes(true);
		console.log(nodes)
		v = "";
		for (var i = 0, l = nodes.length; i < l; i++) {
			v += nodes[i].name + ",";
		}
		if (v.length > 0) v = v.substring(0, v.length - 1);
		var cityObj = $("#treeInfo");
		cityObj.attr("value", v);
	}

	function hideMenu() {
		$("#menuContent").fadeOut("fast");
		$("body").unbind("mousedown", onBodyDown);
	}
	function onBodyDown(event) {
		if (!(event.target.id == "menuBtn" || event.target.id == "menuContent" || $(event.target).parents("#menuContent").length > 0)) {
			hideMenu();
		}
	}

	$.fn.zTree.init($("#treeDemo"), setting, zNodes);

	$(".selectInfo").on("click", function () {
		var cityObj = $("#treeInfo");
		var cityPosition = $("#treeInfo").position();
		var cityOffset = $("#treeInfo").offset();
		// 60爲當前模態框相對於文檔頂部的高度
		$("#menuContent").css({ left: cityPosition.left + "px", top: cityOffset.top-60 + "px" }).slideDown("fast");
		$("body").bind("mousedown", onBodyDown);
	})