1

I need a modal box like media upload in post edit page. but in that I just need to insert a html form using AJAX call ..

I tried to get the output, but I cannot, so I tried ThickBox and I got the output like shown below, but there are 2 issues.

Model I Got:

Model I wanted

  1. I need a TAB Based Popup like in media upload [Update/Media Lib]
  2. I cant get full control over the thickbox

I also tried the following instruction in https://codex.wordpress.org/Javascript_Reference /ThickBox

Modal I Want Like : {No Need of image listing but required an AJAX call and a html form with the tabs}

Modal i want

Code I Entered

<div id="my-content-id" style="display:none;"> <p> This is my hidden content! It will appear in ThickBox when the link is clicked. </p> </div>

I want to control my model with javascript and also needed tab view in that model like

A Kind Note : My Plugin Works At Post Edit Page wp-admin/post-new.php?post_type=page

3
+50

This can be done using a front-end developer's skills.

What i achieved through the customization is as follows.

enter image description here

enter image description here

Through the following code:

<?php add_thickbox(); ?>
<div id="my-content-id" style="display:none;">
  <link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
  <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  <script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
  <script>
  $(function() {
    $( "#tabs" ).tabs();
  });
  </script>

<div id="tabs" style="">

  <ul>
    <li><a href="#tabs-1">Insert Edit/link</a></li>
    <li><a href="#tabs-2">My Second Tab</a></li>
  </ul>
  <div id="tabs-1">
     <p>
          This is my hidden content! It will appear in ThickBox when the link is clicked.
     </p>
  </div>
  <div id="tabs-2">
    <p>Morbi tincidunt, dui sit amet facilisis feugiat, odio metus gravida ante, ut pharetra massa metus id nunc. Duis scelerisque molestie turpis. Sed fringilla, massa eget luctus malesuada, metus eros molestie lectus, ut tempus eros massa ut dolor. Aenean aliquet fringilla sem. Suspendisse sed ligula in ligula suscipit aliquam. Praesent in eros vestibulum mi adipiscing adipiscing. Morbi facilisis. Curabitur ornare consequat nunc. Aenean vel metus. Ut posuere viverra nulla. Aliquam erat volutpat. Pellentesque convallis. Maecenas feugiat, tellus pellentesque pretium posuere, felis lorem euismod felis, eu ornare leo nisi vel felis. Mauris consectetur tortor et purus.</p>
  </div>
</div>
</div>

<a title="<h2 style='padding:0.5em;'>My Custom Popup<h2>" href="#TB_inline?width=600&height=550&inlineId=my-content-id" class="thickbox">View my inline content!</a>    

Add Css code as follows:

#tabs
{
height:100%;width:100%;border:none;padding:0 !important;

}

.ui-widget-header {
  border: none !important;
    background:none !important;
}

.ui-tabs .ui-tabs-nav li {
  }

  #TB_ajaxWindowTitle{
      color:red;
  }

  #TB_title{

      height: 4em !important;
  }

Not the exact structure you want but near to it.

An exact match with the styling like the media box can be obtained using css and jquery.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.