lightbox風iframeから検索データを親フレームに送る #JavaScript

フォームや管理画面で、検索用のインラインフレームをModalウインドウで開き、検索し結果を選択したらModalウインドウを閉じて、親画面のフォーム部分に値を代入します。
デモはこちら

親ウインドウ

inputの属性はreadonly、横の「名前検索窓を開く」ボタンをクリックしたらModalを開きます。

html

<article>
  <section>
    <input type="text" id="parent_name" name="parent_name" value="" readonly="readonly">
    <button type="button" id="open_iframe">名前検索窓を開く</button>
  </section>
</article>
<div id="iframe">
  <div class="iframe_wrap">
    <div id="iframe_container"></div>
  </div>
  <button class="close"><img src="../images/close.png" alt="CLOSE"></button>
</div>
<div id="iframe_overlay"></div>

jQuery

// iframeを開く
$('#open_iframe').on('click', function(){
    var scrolly = parseInt(window.pageYOffset);
    var left = Math.floor(($(window).width() - $("#iframe").width()) / 2);
    var top  = Math.floor(($(window).height() - $("#iframe").height()) / 2)+ scrolly;
    $("#iframe").css({"top":top,"left":left});
    if (!$('.modal_iframe').get(0)) {
        $('#iframe').show().find('#iframe_container').html('<iframe class="modal_iframe" src="iframe1.html"></iframe>');
        $('#iframe_overlay').fadeTo(400, 0.6);
    }
});

// iframe解除
$('#iframe .close, #iframe_overlay').on('click', function() {
  $('#iframe, #iframe_overlay').hide();
  $('.modal_iframe').remove();
});

// リサイズ対策
$(window).on('resize', function(){
  var left = Math.floor(($(window).width() - $("#iframe").width()) / 2);
  var top  = Math.floor(($(window).height() - $("#iframe").height()) / 2);
  $("#iframe").css({"top":top,"left":left});
});

css

#iframe {
  position: absolute;
    margin: auto;
  width: 80%;
  height: 80%;
  max-height: 640px;
  max-width: 924px;
  -webkit-box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
  -moz-box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
  box-shadow: 0px 1px 2px rgba(0,0,0,0.4);
  z-index: 10002;
  display: none;
}
#iframe *:focus {
  outline: none;
}
#iframe .iframe_wrap {
  height: 100%;
}
#iframe button {
  width: 32px;
  height: 32px;
  padding: 0;
  margin: 0;
  background: none;
  border: 0;
  overflow: visible;
  cursor: pointer;
  position: absolute;
  top: -16px;
  right: -16px;
  opacity: 1;
}
#iframe_overlay {
  position: fixed !important;
  z-index: 10001;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  background-color: #000;
  display: none;
}
#iframe_container {
  height: 100%;
}
#iframe_container iframe {
  width: 100%;
  height: 100%;
  border: none;
  overflow: auto;
  background-color: #fff;
}

Modalウインドウ

インラインフレームを、見た目Modalウインドウ風に見せます。
検索ボタンを押すとAJAXでphpを呼び出し、検索を行います。
データは下記サイトよりダミーデータを5000件ほど作成しました。
なんちゃって個人情報

php自体はPOSTでもGETでもjsonを出力するようにしましたので、テストは下記より。
例：「佐藤」さんで検索データをjson出力
URLの末尾のnameパラメータを変えれば結果が変わります。

html

<input type="text" id="search_name" placeholder="名前の一部を入力">
<button id="search">検索</button><br>
<table>
  <thead>
    <tr>
      <th>名前</th>
      <th>性別</th>
      <th>年齢</th>
      <th>出身</th>
      <th>選択</th>
    </tr>
  </thead>
  <tbody></tbody>
</table>

JavaScript

$( document ).ready(function() {
    $('#search').on("click", function(){
        searchName($("#search_name").val());
    });
});
function searchName(sname) {
  $.ajax({
    url: './dummy.php',
    data: {
      "name": sname
    },
    dataType: "json",
    type: 'post'
  }).done(function(data){
    for(var cnt in data){
      $('<tr>'+
      '<td>'+data[cnt].name+'</td>'+
      '<td>'+data[cnt].gender+'</td>'+
      '<td>'+data[cnt].age+'</td>'+
      '<td>'+data[cnt].pref+'</td>'+
      '<td><button type="button" id="selection'+cnt+'" value="'+data[cnt].name+'">選択</button></td>'+
      '</tr>').appendTo('table tbody');
        $('#selection'+[cnt]).on("click", function(){
        $('#parent_name',parent.document).val($(this).val());
        $('#iframe, #iframe_overlay',parent.document).hide();
        $('.modal_iframe',parent.document).remove();
        });
    }
  });
}

エラー処理は好みで追記してください。

ポイント

jsonデータの数でループさせ、行の追加とonclickの処理を同時に行います。
セレクタをユニークにして処理する為です。

Modalウインドウを閉じる処理は３種類あります。
- 検索結果の[選択]ボタンをクリック（インラインフレームに記述）
- 閉じる画像をクリック（親ウインドウに記述）
- 黒半透明の部分をクリック（親ウインドウに記述）

Modalウインドウはインラインフレームなので、そこからjQueryで親ウインドウに命令するには、セレクタにカンマ＋parent.documentを追加します。

デモはこちら