效果預覽：
實現功能：
父頁面中點擊輸入框彈出聯繫人選擇窗口
聯繫人選擇窗口可搜索聯繫人，勾選聯繫人後點擊添加按鈕將聯繫人回傳至父頁面輸入窗口。
實現代碼：
父頁面HTML
<div class="layui-inline">
<label class="layui-form-label">聯繫人</label>
<div class="layui-input-inline">
<input type="text" name="linkman" id="addlink" class="layui-input newsAuthor" lay-verify="required" placeholder="聯繫人或申請人" autocomplete="off">
</div>
</div>
父頁面JS:
layui.use(['layer', 'form','laydate'], function(){
var layer = layui.layer,
laydate = layui.laydate,
form = layui.form;
$ = layui.jquery;
//選擇聯繫人
$("#addlink").click(function(){
layer.open({
type: 2,
title:"添加聯繫人",
id:"link",
area: ['75%', '80%'],
fixed: false, //不固定
maxmin: true,
content: '../link/addlink.php'
});
});
});
聯繫人選擇界面(addlink.php)：
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>添加聯繫人</title>
<link rel="stylesheet" href="../../layui/css/layui.css" media="all">
<style>
body{padding:10px; font-size:14px; background:#fff; width:95%; margin:0 auto; font-size:14px; line-height:20px; overflow:auto;}
p{margin-bottom:10px;}
input{border:1px solid #999; padding:5px 10px; margin:0 10px 10px 0;}
.layui-form-item {
margin-top: 15px;
}
.layui-input-block{
float: left;
margin-left: 0;
margin-right: 2%;
}
td.on{
border-bottom: 1px solid #D60711;
color: #D60711;
}
td.active{
background: #D60711;
color: #fff;
}
.search_div{
width: 95%;
position: fixed;
z-index: 2;
background-color: #fff;
border: 1px solid #e6e6e6;
}
.layui-table {
width: 100%;
background-color: #fff;
color: #666;
}
</style>
</head>
<body class="layui-form">
<div class="search_div">
<div class="layui-form-item">
<label class="layui-form-label">輸入關鍵字</label>
<div class="layui-input-block">
<input type="text" name="title" required lay-verify="required" placeholder="請輸入姓名" autocomplete="off" class="layui-input" id="searchInput" >
</div>
<div class="layui-input-block">
<button class="layui-btn" id="form" lay-submit lay-filter="formDemo">搜索</button>
</div>
<div class="layui-input-block">
<button class="layui-btn layui-btn-normal" id="add"><i class="layui-icon"></i>添加到聯繫人</button>
</div>
<div class="layui-inline">
<div class="layui-form-mid layui-word-aux">如果實在不知道聯繫人選擇“不詳”</div>
</div>
</div>
</div>
<p style="height: 70px;"></p>
<table class="layui-table" id="all_list">
<colgroup>
<col width="8%">
<col >
<col>
<col>
</colgroup>
<thead>
<tr>
<th>選擇</th>
<th>姓名</th>
<th>公司名稱</th>
<th>聯繫電話</th>
</tr>
</thead>
<tbody>
<?php
for($i=0;$i<count($list);$i++){
echo "<tr>";
echo '<td><input type="checkbox" name="name" lay-skin="primary" data-id="'.$list[$i]["name"].'" > </td>';
echo '<td class="list_one">'.$list[$i]["name"].'</td>';
echo '<td class="list_one">'.$list[$i]["com"].'</td>';
echo '<td class="list_one">'.$list[$i]["phone"].'</td>';
}
?>
</tbody>
</table>
<script src="../../layui/layui.js"></script>
<script type="text/javascript">//注意：parent 是 JS 自帶的全局對象，可用於操作父頁面
layui.use(['layer', 'form'], function(){
var layer = layui.layer
,form = layui.form;
$ = layui.jquery;
var link = parent.layer.getFrameIndex(window.name); //獲取窗口索引
//回車鍵查詢
$(".layui-input").bind("keydown",function(e){
// 兼容FF和IE和Opera
var theEvent = e || window.event;
var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
if (code == 13) {
//回車執行查詢
$("#form").click();
}
});
var active = 0;
form.on("submit(formDemo)",function(data){
// 獲取搜索框的值
var kwds = $("#searchInput").val();
// 獲取第一個列表內容
var this_one = {};
var real_name = '';
// 定義數據列表
var list = $("#all_list .list_one");
// 定義查找的起始值
var true_one = 0;
for (var i = 0; i < list.length; i++) {
this_one = $(list[i]);
real_name = this_one.text().toString();
// 執行like匹配
if(real_name.match(kwds)){
// 處理第當前的結果
if(true_one == active){
// 獲取窗口的寬和高
var windows_wdh = $(window).width();
var windows_hgt = $(window).height();
// 獲取第一個座標
var x_len = this_one.offset().left;
var y_len = this_one.offset().top;
// 驅動滾動條滾動到指定的位置
$("html,body").animate({scrollTop:(y_len-windows_hgt/2), scrollLeft:(x_len-windows_wdh/2)},500);
// 標記當前選中的結果
this_one.addClass('active');
this_one.removeClass('on');
}else{
// 標記符合的結果
this_one.addClass('on');
this_one.removeClass('active');
}
// 累加真實的選擇
true_one++;
}else{
this_one.removeClass('on');
this_one.removeClass('active');
}
}
// 判斷是否搜索完畢 如果搜索完畢 則從第一個開始 否則繼續搜索下一個
active = active >= true_one-1 ? 0 : active+1;
if(true_one == 0){
layer.msg('未匹配到聯繫人', function(){});
}
return false;
})
$('#add').on('click', function(){
var id_array=new Array();
$('input[name="name"]:checked').each(function(){
id_array.push($(this).attr("data-id"));//向數組中添加元素
});
var idstr=id_array.join(',');//將數組元素連接起來以構建一個字符串
//alert(idstr);
//alert(id_array.length);
if(id_array.length>3){
layer.msg('你④不④傻，選這麼多聯繫人？', function(){});
}else{
parent.$('#addlink').val(idstr);
parent.layer.close(link);
}
});
});
</script>
</body>
</html>
聯繫人爲PHP數組循環遍歷，請手動更改查看效果。
希望能幫助到有需要的朋友，歡迎指正！