wordpress-admin-modal

functions.php

<?php
// 管理画面にCSSとJSの読み込みを追加
function enqueue_modal_files() {
  wp_enqueue_style('modal-style' , get_stylesheet_directory_uri() . '/css/modal.css');
  wp_enqueue_script('modal-js' , get_stylesheet_directory_uri() . '/js/modal.js');
}
add_action('admin_enqueue_scripts', 'enqueue_modal_files');

// AJAXリクエストに対してJSONを返す
function ajax_modal() {
    // csrf対策
    check_ajax_referer('ajax_modal', 'secure');

    // 表示するデータ DBやAPIから読んでもOK
    $items = array(
      array('id' => '1', 'title' => 'foo'), 
      array('id' => '2', 'title' => 'bar'), 
    );

    echo json_encode(array('items' => $items));

    // dieで終わらせる必要あり
    die();
}
// wp_ajax_<funciton名>というフックでAJAXのアクションを追加できる
add_action('wp_ajax_ajax_modal', 'ajax_modal');

// モーダルボタンの表示
function open_modal_script() {
  // nonceが必要なためPHPからJavaScript出力
  echo "
  <script>
    jQuery(document).ready(function(){
      jQuery('#titlewrap').append(\" <a href='#' id='open-modal-button' class='button'>モーダルウィンドウを開く</a>\");
      jQuery('#open-modal-button').on('click', function(){ open_modal('" . wp_create_nonce('ajax_modal') . "') });
      
    });
  </script>
  ";
}    
add_action('admin_head', 'open_modal_script', 1);

modal.css

.modal {
  position: fixed;
  width: 800px;
  height: 600px;
  top: 50px;
  margin: auto;
  background-color: #fff;
  z-index: 99999;
}

.modal-container {
  position: relative;
  margin: auto;
  width: 100%;
  height: 100%;
  padding: 30px;
  color: #000;
}

.modal-background {
  position: fixed;
  width: 100%;
  height: 150%;
  top: -50px;
  left: 0px;
  background-color: #000;
  z-index: 99990;
  opacity: 0.5;
}

.modal-list {
  overflow:auto;
  width: 600px;
  height: 500px;
}

.modal-new {
  text-align: right;
  position: absolute;
  bottom: 130px;
  right: 90px;
}

.modal-ok {
  text-align: right;
  position: absolute;
  bottom: 90px;
  right: 160px;
}

.modal-cancel {
  text-align: right;
  position: absolute;
  bottom: 90px;
  right: 90px;
}

modal.js

function open_modal(nonce) {
  jQuery.ajax({
    type: 'POST',
    url: ajaxurl,
    data: {
        'action': 'ajax_modal',
        'secure': nonce
    },
    success: function(json) {
      modal_data = JSON.parse(json);

      jQuery('body').append('<div id="modal-background" class="modal-background"></div>');
      jQuery('body').append('<div id="modal" class="modal"><div id="modal-container" class="modal-container"></div></div>');
      jQuery('#modal').css('left', (window.innerWidth - 800) / 2);

      jQuery('#modal-container').append('<h3>モーダルじゃい</h3>');
      jQuery('#modal-container').append('<ul id="modal-list" class="modal-list"></ui>');
      modal_data.items.forEach(function(item, i, items) {
        jQuery('#modal-list').append('<li><input type="checkbox" name="selected_items[]" value="' + item.id + '"> ' + item.title + '</li>');
      });

      jQuery('#modal-container').append('<div id="modal-ok" class="modal-ok button">OK</div>');
      jQuery('#modal-ok').on('click', function(){ 
        // 何らかの処理
        jQuery('#modal').remove(); jQuery('#modal-background').remove(); 
      });

      jQuery('#modal-container').append('<div id="modal-cancel" class="modal-cancel button">Cancel</div>');
      jQuery('#modal-cancel').on('click', function(){ jQuery('#modal').remove(); jQuery('#modal-background').remove(); });

    }
  });
}