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);
	})