# Sử dụng ajax tạo popup cho các bài viết wordrpess mattervn.com (ok)

<figure><img src="/files/phUy1La6bLpWpBREUgga" alt=""><figcaption></figcaption></figure>

C:\xampp82\htdocs\testpro\wp-content\themes\gutener-child\functions.php

```php
add_action('wp_enqueue_scripts', 'add_theme_scripts', 99);
function add_theme_scripts()
{
  wp_enqueue_style('carouselcss', get_stylesheet_directory_uri() . '/assets/css/owl.carousel.css', array(),  wp_generate_uuid4(), 'all');
  wp_enqueue_style('styleathomecss', get_stylesheet_directory_uri() . '/assets/css/dev-custom.css', array(),  wp_generate_uuid4(), 'all');
  wp_enqueue_script('lazysizesjs', get_stylesheet_directory_uri() . '/assets/js/lazysizes.min.js', array('jquery'),  wp_generate_uuid4(), 'true');
  wp_enqueue_script('carouseljs', get_stylesheet_directory_uri() . '/assets/js/owl.carousel.js', array('jquery'),  wp_generate_uuid4(), 'true');
  wp_enqueue_script('styleathomejs', get_stylesheet_directory_uri() . '/assets/js/dev-custom.js', array('jquery'),  wp_generate_uuid4(), 'true');
  wp_localize_script(
    'styleathomejs',
    'frontend_ajax_object',
    array(
      'ajaxurl'   => admin_url('admin-ajax.php'),
      'ajaxnonce' => wp_create_nonce('ajaxnonce'),
    )
  );
}
add_action('wp_ajax_func_knowledge_popup', 'func_knowledge_popup');
add_action("wp_ajax_nopriv_func_knowledge_popup", "func_knowledge_popup");
function func_knowledge_popup() {
  echo wp_json_encode(['status' => 'success']);
  wp_die();
}
```

C:\xampp82\htdocs\testpro\wp-content\themes\gutener-child\assets\js\dev-custom.js

```javascript
var $ = jQuery;
jQuery(document).ready(function ($) {
  $('.knowledge-popup').click(function (e) {
    e.preventDefault(); // prevent
    let id = $(this).data('id');
    $.ajax({
      type: 'POST',
      url: frontend_ajax_object.ajaxurl,
      data: {
        action: 'func_knowledge_popup',
      },
      success: function (result) {
        var result = JSON.parse(result);
        if (result.status == 'success') {
          var html = '';
          html += '<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">';
          html += '<div class="modal-dialog">';
          html += '<div class="modal-content">';
          html += '<div class="modal-header">';
          html += '<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>';
          html += '<button type="button" class="close" data-dismiss="modal" aria-label="Close">';
          html += '<span aria-hidden="true">&times;</span>';
          html += '</button>';
          html += '</div>';
          html += '<div class="modal-body">';
          html += 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel, libero?';
          html += '</div>';
          html += '<div class="modal-footer">';
          html += '<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>';
          html += '<button type="button" class="btn btn-primary">Save changes</button>';
          html += '</div>';
          html += '</div>';
          html += '</div>';
          html += '</div>';
          $('#knowledge-append').html(html);
          jQuery('#exampleModal').modal('show');
        }
      }
    });
  });
});

```

C:\xampp82\htdocs\testpro\wp-content\themes\gutener-child\category-kien-thuc-chung.php

```php
<?php
/**
 * The main template file
 *
 * This is the most generic template file in a WordPress theme
 * and one of the two required files for a theme (the other being style.css).
 * It is used to display a page when nothing more specific matches a query.
 * E.g., it puts together the home page when no home.php file exists.
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package Gutener
 */
get_header();
?>
<?php
if (is_home() && !get_theme_mod('disable_main_slider', false)) {
  if (get_theme_mod('main_slider_controls', 'slider') == 'slider') {
    if (get_theme_mod('display_slider_on', 'blog-page-below-header') == 'blog-page-below-header' || get_theme_mod('display_slider_on', 'blog-page-below-header') == 'front-blog-page-below-header') { ?>
      <section class="section-banner">
        <?php
        get_template_part('template-parts/slider/slider', '');
        ?>
      </section>
<?php }
  } elseif (get_theme_mod('main_slider_controls', 'slider') == 'banner') {
    if (get_theme_mod('display_banner_on', 'blog-page-below-header') == 'blog-page-below-header' || get_theme_mod('display_banner_on', 'blog-page-below-header') == 'front-blog-page-below-header') {
      gutener_banner();
    }
  }
} ?>
<div id="content" class="site-content">
  <div class="container">
    <?php
    //Highlighted Posts Section
    if (get_theme_mod('highlight_posts_section_layouts', 'highlighted_one') == '' || get_theme_mod('highlight_posts_section_layouts', 'highlighted_one') == 'highlighted_one') {
      get_template_part('template-parts/highlight-posts/highlight-posts', 'one');
    } ?>
    <!-- Latest Posts Section -->
    <?php
    $latest_posts_category = get_theme_mod('latest_posts_category', '');
    $query = new WP_Query(apply_filters('gutener_blog_args', array(
      'post_type'           => 'post',
      'post_status'         => 'publish',
      'cat'                 => $latest_posts_category,
      'paged'              => get_query_var('paged', 1),
    )));
    $posts_array = $query->get_posts();
    $show_latest_posts = count($posts_array) > 0;
    if (!get_theme_mod('disable_latest_posts_section', false) && $show_latest_posts) {
      $latest_title_desc_align = get_theme_mod('latest_posts_section_title_desc_alignment', 'left');
      if ($latest_title_desc_align == 'left') {
        $latest_title_desc_align = 'text-left';
      } else if ($latest_title_desc_align == 'center') {
        $latest_title_desc_align = 'text-center';
      } else {
        $latest_title_desc_align = 'text-right';
      } ?>
      <section class="section-post-area">
        <div class="row">
          <?php
          $sidebarClass = 'col-lg-8';
          $sidebarColumnClass = 'col-lg-4';
          $masonry_class = '';
          if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
            $masonry_class = 'grid';
          }
          if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
            $layout_class = 'grid-post-wrap';
          } elseif (get_theme_mod('archive_post_layout', 'grid') == 'single') {
            $layout_class = 'single-post';
          }
          if (get_theme_mod('sidebar_settings', 'right') == 'right') {
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
              if (!is_active_sidebar('right-sidebar')) {
                $sidebarClass = "col-12";
              }
            } else {
              if (!is_active_sidebar('right-sidebar')) {
                $sidebarClass = "col-lg-8 offset-lg-2";
              }
            }
          } elseif (get_theme_mod('sidebar_settings', 'right') == 'left') {
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
              if (!is_active_sidebar('left-sidebar')) {
                $sidebarClass = "col-12";
              }
            } else {
              if (!is_active_sidebar('left-sidebar')) {
                $sidebarClass = "col-lg-8 offset-lg-2";
              }
            }
          } elseif (get_theme_mod('sidebar_settings', 'right') == 'right-left') {
            $sidebarClass = 'col-lg-6';
            $sidebarColumnClass = 'col-lg-3';
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
              if (!is_active_sidebar('left-sidebar') && !is_active_sidebar('right-sidebar')) {
                $sidebarClass = "col-12";
              }
            } else {
              if (!is_active_sidebar('left-sidebar') && !is_active_sidebar('right-sidebar')) {
                $sidebarClass = "col-lg-8 offset-lg-2";
              }
            }
          }
          if (get_theme_mod('sidebar_settings', 'right') == 'no-sidebar' || get_theme_mod('disable_sidebar_blog_page', false)) {
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
              $sidebarClass = "col-12";
            } else {
              $sidebarClass = 'col-lg-8 offset-lg-2';
            }
          }
          if (!get_theme_mod('disable_sidebar_blog_page', false)) {
            if (get_theme_mod('sidebar_settings', 'right') == 'left') {
              if (is_active_sidebar('left-sidebar')) { ?>
                <div id="secondary" class="sidebar left-sidebar <?php echo esc_attr($sidebarColumnClass); ?>">
                  <?php dynamic_sidebar('left-sidebar'); ?>
                </div>
              <?php }
            } elseif (get_theme_mod('sidebar_settings', 'right') == 'right-left') {
              if (is_active_sidebar('left-sidebar') || is_active_sidebar('right-sidebar')) { ?>
                <div id="secondary" class="sidebar left-sidebar <?php echo esc_attr($sidebarColumnClass); ?>">
                  <?php dynamic_sidebar('left-sidebar'); ?>
                </div>
          <?php
              }
            }
          } ?>
          <div id="primary" class="content-area <?php echo esc_attr($sidebarClass); ?>">
            <?php if (is_home() && !get_theme_mod('disable_main_slider', false)) {
              if (get_theme_mod('main_slider_controls', 'slider') == 'slider') {
                if (get_theme_mod('display_slider_on', 'blog-page-below-header') == 'blog-page-above-latest-posts') { ?>
                  <section class="section-banner">
                    <?php
                    get_template_part('template-parts/slider/slider', '');
                    ?>
                  </section>
            <?php }
              } elseif (get_theme_mod('main_slider_controls', 'slider') == 'banner') {
                if (get_theme_mod('display_banner_on', 'blog-page-below-header') == 'blog-page-above-latest-posts') {
                  gutener_banner();
                }
              }
            } ?>
            <?php if ((!get_theme_mod('disable_latest_posts_section_title', true) && get_theme_mod('latest_posts_section_title', '')) || (!get_theme_mod('disable_latest_posts_section_description', true) && get_theme_mod('latest_posts_section_description', ''))) { ?>
              <div class="section-title-wrap <?php echo esc_attr($latest_title_desc_align); ?>">
                <?php if (!get_theme_mod('disable_latest_posts_section_title', true) && get_theme_mod('latest_posts_section_title', '')) { ?>
                  <h2 class="section-title"><?php echo esc_html(get_theme_mod('latest_posts_section_title', '')); ?></h2>
                <?php }
                if (!get_theme_mod('disable_latest_posts_section_description', true) && get_theme_mod('latest_posts_section_description', '')) { ?>
                  <p><?php echo esc_html(get_theme_mod('latest_posts_section_description', '')); ?></p>
                <?php } ?>
              </div>
            <?php } ?>
            <div class="row <?php echo esc_attr($masonry_class); ?>">
              <?php
              if ($query->have_posts()) :
                if (is_home() && !is_front_page()) :
              ?>
                  <header>
                    <h1 class="page-title screen-reader-text"><?php single_post_title(); ?></h1>
                  </header>
              <?php
                endif;
                $i = 0;
                while ($query->have_posts()) :
                  $i++;
                  $query->the_post();
                  get_template_part('template-parts/content', 'kien-thuc', array('index'  => $i));
                endwhile;
              elseif (!is_sticky() && !$query->have_posts()) :
                get_template_part('template-parts/content', 'none');
              endif;
              ?>
            </div>
            <?php
            if (!get_theme_mod('disable_pagination', false)) :
              the_posts_pagination(array(
                'total'        => $query->max_num_pages,
                'next_text' => '<span>' . esc_html__('Next', 'gutener') . '</span><span class="screen-reader-text">' . esc_html__('Next page', 'gutener') . '</span>',
                'prev_text' => '<span>' . esc_html__('Prev', 'gutener') . '</span><span class="screen-reader-text">' . esc_html__('Previous page', 'gutener') . '</span>',
                'before_page_number' => '<span class="meta-nav screen-reader-text">' . esc_html__('Page', 'gutener') . ' </span>',
              ));
            endif;
            wp_reset_postdata();
            ?>
          </div><!-- #primary -->
          <?php
          if (!get_theme_mod('disable_sidebar_blog_page', false)) {
            if (get_theme_mod('sidebar_settings', 'right') == 'right') {
              if (is_active_sidebar('right-sidebar')) { ?>
                <div id="secondary" class="sidebar right-sidebar <?php echo esc_attr($sidebarColumnClass); ?>">
                  <?php dynamic_sidebar('right-sidebar'); ?>
                </div>
              <?php }
            } elseif (get_theme_mod('sidebar_settings', 'right') == 'right-left') {
              if (is_active_sidebar('left-sidebar') || is_active_sidebar('right-sidebar')) { ?>
                <div id="secondary-sidebar" class="sidebar right-sidebar <?php echo esc_attr($sidebarColumnClass); ?>">
                  <?php dynamic_sidebar('right-sidebar'); ?>
                </div>
          <?php
              }
            }
          }
          ?>
        </div>
      </section>
    <?php } ?>
    <?php
    //Featured Posts Section
    if (get_theme_mod('feature_posts_section_layouts', 'feature_one') == '' || get_theme_mod('feature_posts_section_layouts', 'feature_one') == 'feature_one') {
      get_template_part('template-parts/feature-posts/feature-posts', 'one');
    } ?>
  </div><!-- #container -->
</div><!-- #content -->
<div id="knowledge-append"></div>
<?php
get_footer();

```

C:\xampp82\htdocs\testpro\wp-content\themes\gutener-child\template-parts\content-kien-thuc.php

```php
<?php
/**
 * Template part for displaying posts
 *
 * @link https://developer.wordpress.org/themes/basics/template-hierarchy/
 *
 * @package Gutener
 */
$index =  $args['index'];
?>
<?php
$stickyClass = "col-12";
$layout_class = '';
if (get_theme_mod('sidebar_settings', 'right') == 'right') {
  if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
    $stickyClass = "col-sm-6 grid-post";
    if (!is_active_sidebar('right-sidebar')) {
      $stickyClass = "col-sm-6 col-lg-4 grid-post";
    }
  }
} elseif (get_theme_mod('sidebar_settings', 'right') == 'left') {
  if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
    $stickyClass = "col-sm-6 grid-post";
    if (!is_active_sidebar('left-sidebar')) {
      $stickyClass = "col-sm-6 col-lg-4 grid-post";
    }
  }
} elseif (get_theme_mod('sidebar_settings', 'right') == 'no-sidebar') {
  if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
    $stickyClass = "col-sm-6 col-lg-4 grid-post"; // default
  }
} elseif (get_theme_mod('sidebar_settings', 'right') == 'right-left') {
  if (get_theme_mod('archive_post_layout', 'grid') == 'grid') {
    $stickyClass = "col-sm-6 col-lg-6 grid-post";
    if (!is_active_sidebar('left-sidebar') && !is_active_sidebar('right-sidebar')) {
      $stickyClass = "col-sm-6 col-lg-4 grid-post";
    }
  }
}
if (get_theme_mod('disable_sidebar_blog_page', false) && get_theme_mod('archive_post_layout', 'grid') == 'grid') {
  $stickyClass = "col-sm-6 col-lg-4 grid-post";
}
if (!is_sticky() && get_theme_mod('archive_post_layout', 'grid') == 'list') {
  $layout_class = 'list-post';
} elseif (!is_sticky() && get_theme_mod('archive_post_layout', 'grid') == 'single') {
  $layout_class = 'single-post';
} elseif (is_archive() && is_sticky() && get_theme_mod('archive_post_layout', 'grid') == 'list') {
  $layout_class = 'list-post';
} elseif (is_archive() && is_sticky() && get_theme_mod('archive_post_layout', 'grid') == 'single') {
  $layout_class = 'single-post';
}
$layout_class .= 'knowledge-popup ';
$class = '';
if (!has_post_thumbnail()) {
  $class = 'no-thumbnail';
}
if ($index == 1) :
  $stickyClass = "col-sm-12 col-lg-12 grid-post grid-post--__image";
elseif ($index == 2 || $index == 3) :
  $stickyClass = "col-sm-6 col-lg-6 grid-post grid-post--__image";
else :
  $stickyClass = "col-sm-4 col-lg-4 grid-post grid-post--__image";
endif;
?>
<div class="<?php echo esc_attr($stickyClass); ?>">
  <article  id="post-<?php the_ID(); ?>" <?php post_class($class . ' ' . $layout_class) ?> data-id="<?php the_ID(); ?>">
    <?php
    if (has_post_thumbnail()) : ?>
      <figure class="featured-image">
        <a href="<?php the_permalink(); ?>">
          <?php
          if (get_theme_mod('sidebar_settings', 'right') == 'right') {
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid' || get_theme_mod('archive_post_layout', 'grid') == 'list') {
              gutener_image_size('gutener-420-300');
            } elseif (get_theme_mod('archive_post_layout', 'grid') == 'single') {
              gutener_image_size('gutener-1370-550');
            }
          } elseif (get_theme_mod('sidebar_settings', 'right') == 'left') {
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid' || get_theme_mod('archive_post_layout', 'grid') == 'list') {
              gutener_image_size('gutener-420-300');
            } elseif (get_theme_mod('archive_post_layout', 'grid') == 'single') {
              gutener_image_size('gutener-1370-550');
            }
          } elseif (get_theme_mod('sidebar_settings', 'right') == 'no-sidebar') {
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid' || get_theme_mod('archive_post_layout', 'grid') == 'list') {
              gutener_image_size('gutener-420-300');
            } elseif (get_theme_mod('archive_post_layout', 'grid') == 'single') {
              gutener_image_size('gutener-1370-550');
            }
          } elseif (get_theme_mod('sidebar_settings', 'right') == 'right-left') {
            if (get_theme_mod('archive_post_layout', 'grid') == 'grid' || get_theme_mod('archive_post_layout', 'grid') == 'list') {
              gutener_image_size('gutener-420-300');
            } elseif (get_theme_mod('archive_post_layout', 'grid') == 'single') {
              gutener_image_size('gutener-1370-550');
            }
          }
          ?>
        </a>
      </figure><!-- .recent-image -->
    <?php
    endif;
    ?>
    <div class="entry-content">
      <header class="entry-header">
        <?php
        if (!get_theme_mod('hide_category', false)) {
          gutener_entry_header();
        }
        if (!get_theme_mod('hide_post_title', false)) {
          the_title('<h3 class="entry-title"><a href="' . esc_url(get_permalink()) . '" rel="bookmark">', '</a></h3>');
        }
        ?>
      </header><!-- .entry-header -->
      <div class="entry-meta">
        <?php gutener_entry_footer(); ?>
      </div><!-- .entry-meta -->
      <?php if (!get_theme_mod('hide_blog_page_excerpt', false) || !get_theme_mod('hide_post_button', true)) { ?>
        <div class="entry-text">
          <?php
          if (!get_theme_mod('hide_blog_page_excerpt', false)) {
            $excerpt_length = get_theme_mod('post_excerpt_length', 15);
            $sticky_simple_excerpt_length = get_theme_mod('sticky_simple_post_excerpt_length', 40);
            if (is_sticky()) {
              gutener_excerpt($sticky_simple_excerpt_length, true);
            } else {
              gutener_excerpt($excerpt_length, true);
            }
          } ?>
          <?php
          if (!get_theme_mod('hide_post_button', true) && get_theme_mod('post_button_text', '')) {
            $button_type = 'button-text';
            if (get_theme_mod('post_button_type', 'button-text') == 'button-primary') {
              $button_type = 'button-primary';
            } elseif (get_theme_mod('post_button_type', 'button-text') == 'button-outline') {
              $button_type = 'button-outline';
            } ?>
            <div class="button-container">
              <a href="<?php the_permalink(); ?>" class="<?php echo esc_attr($button_type); ?>">
                <?php
                $post_button_text = get_theme_mod('post_button_text', '');
                echo esc_html($post_button_text ? $post_button_text : "");
                ?>
              </a>
            </div>
          <?php }  ?>
        </div>
      <?php } ?>
    </div><!-- .entry-content -->
  </article><!-- #post-->
</div>
```


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://javascriptuse.gitbook.io/javascript/su-dung-ajax-tao-popup-cho-cac-bai-viet-wordrpess-mattervn.com-ok.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.