php - How to add a custom modal to the admin edit posts page

Question

I want to add a modal that shows when the set featured image button is clicked. I currently have a simple jquery alert that explains the min widths and heights of the image needed.

 jQuery(document).ready(function(){
  jQuery('#set-post-thumbnail').click( function(){ 
    alert('Thumbnail/Featured images need to be at least width: 450px by height: 640px; '); 
   });
 });

I would like to be able to have a more comprehensive visual explanation as my end users are not computer literate.

I have tried a few options like thickbox:

add_thickbox();
<a href="your url" class="thickbox">click here</a>

which works great on my edit.php page but my php knowledge is not good enough to get a proper grip on what to add to my functions.php or posts.php to get a pop up of some kind working on the edit posts page.

Thanks in advance :)

Answer 1

try this, here is fiddle

      <h2>Animated Modal with Header and Footer</h2>
  <!-- Trigger/Open The Modal -->
  <button id="myBtn">Open Modal</button>
  <!-- The Modal -->
  <div id="myModal" class="modal">
      <!-- Modal content -->
      <div class="modal-content">
          <div class="modal-header">
              <span class="close">×</span>
              <h2>Modal Header</h2>
          </div>
          <div class="modal-body">
              <p>Some text in the Modal Body</p>
              <p>Some other text...</p>
          </div>
          <div class="modal-footer">
              <h3>Modal Footer</h3>
          </div>
      </div>
  </div>