这可以使用前端开发人员的技能来完成。
我通过定制实现了以下目标。
通过以下代码:
<?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>
添加Css代码如下:
#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;
}
不是你想要的确切结构,但离它很近。
使用css和jquery可以获得与媒体盒等样式的精确匹配。