drnbotxo449747 2016-08-18 22:10
浏览 39


I have a small problem with a feature that I'm trying to implement on my site. I want when I click on an excerpt from a blog post on my homepage that the content of the article (single.php) opens in a modal window.

I use jQuery and Ajax to do that and it works really well except that Ajax fetches me the entire contents of single.php file (ie the header with scripts, styles, doctype, footer, etc.). I would just like to get the div (#PostContainer) that includes the title of the article and the content.

You will probably tell me to just delete my header and footer of the single.php file, but this is not possible because it is important to keep intact my file to be able to access from the address of the blog post (www.mydomainname.com/blog-post1).

It turns out that I am not at all familiar with WordPress :/ This is the first time I build a theme. The codes I shared with you run like a charm on WordPress but recovers me all of my single.php file (header + content in my div #postContainer + footer). I would like to recover only the contents of my div #postContainer.

I'm stuck :/

Someone would help me please ?

Thank you so so much for your time !

Here are my codes :


<a class="hs-inner-click modal" data-content="<?php the_permalink(); ?>"           rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>">


.modal-window {
  position: fixed;
  left: 50%;
  top: 50px;
  width: 720px;
  background-color: #fff;
  transform: translate(-50%, 0);
  z-index: 11;
.modal-shade {
  position: fixed;
  height: 100%;
  width: 100%;
  background-color: rgba(0, 0, 0, .7);
  z-index: 10;
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;

JQUERY & AJAX in a JS file :

(function($) {

    $.fn.modal = function (opt) {

        var settings, createModal, closeModal, body;

        settings = $.extend({
            'modal': 'jquery-modal',
            'close': 'jquery-modal-close',
            'shade': 'jquery-modal-shade'
        }, opt);

        body = $('body');

        closeModal = function(modal, shade) {

        createModal = function(data) {
            var shade, close, modal;

            shade =$('<div />', {
                class: settings.shade
            }).on('click', function() {
                closeModal(modal, shade);

            close =$('<a />', {
                text: settings.closeText,
                class: settings.close,
                href: '#'
            }).on('click', function(e) {
                closeModal(modal, shade);

            modal =$('<div />', {
                html: data,
                class: settings.modal

            body.prepend(shade, modal);

        this.on('click', function(e) {
            var self =$(this);

                type: 'get',
                cache: false,
            }).done(function(data) {
            }).error(function() {
                createModal('There is a mistake');


  • 写回答

1条回答 默认 最新

  • dongleiqiao2107 2016-08-18 22:19
    1. I would suggest to use WordPress REST API V2 for the request without the need of selecting a div or loading single.php without header & footer.

    This will allow you to load post content by just calling an endpoint similar to this: /wp-json/wp/v2/posts/<id>

    Full API reference here.

    1. Alternatively I am not sure if it will work but jquery code might help you (execute onload of modal): $("#jquery-modal").load("www.mydomainname.com/blog-post1 #postContainer");

    ADDITIONALLY: On ajax success append content on a dummy div and use it to find only the part of the page you need and return it. That's the way jquery load() actually works if you check the source.

    jQuery( "<div>" ).append( jQuery.parseHTML(data) ).find("#postContainer");

    本回答被题主选为最佳回答 , 对您是否有帮助呢?



  • ¥15 关于模型训练的一个问题
  • ¥15 装了几千台服务器从来没遇到这种问题,哎看下哪位帮我解决吧
  • ¥15 单片机程序上的困难问题
  • ¥15 请教某软件缓存Ts文件破解合并mp4的方法
  • ¥15 求小游戏炸弹人中关于敌人的C++代码
  • ¥15 拿到这个服务器最高权限有偿
  • ¥50 来个抓app跳转支付宝转链接的
  • ¥15 remotes安装提示没有description文件
  • ¥15 AttributeError: 'NoneType' object has no attribute 'drop_duplicates'报错
  • ¥15 以下代码,运行结果报错