Streaming live at 10am (PST)

How to incorporate AJAX into Webflow for popup DIVs

Hello Webflow Community,

I am trying to incorporate using AJAX to populate a popup DIV for a modal popup from content from a CMS-generated webpage.

Here is the homepage where the testimonials will live: – scroll down to the “Client Testimonials” section and view/click on each testimonial so you can see what I’m trying to do.

Here is some sample content that I want to load into the popup DIV: I’m trying to grab all of the content from “testimonial-source-div” that’s located in that webpage and load it into the popup on my homepage: into the “testimonial-target-div” popup DIV.

I also need some way to store the testimonial URL (from the CMS database) into a element so the script can reference this URL and load the correct testimonial into the popup DIV.

Simple enough? :wink:

Can you point me to some “Using AJAX with Webflow and pulling from the CMS-generated webpages” examples? :smiley:

Here is my public share link: LINK
(how to access public share link)

​From what it sounds like, you may be able to achieve your goal with a popup that has a dynamic list in it that’s filtered by tags (item references)

Note: this is a workaround as we cannot have nested dynamic lists yet.

Thanks for responding to me.

Filtered by tags?

I don’t see that as an option – how do I go about doing this?



So are you saying that loading the specific detail page into the container DIV by way of AJAX is not possible right now using Webflow?

Hi @PCGear, I believe you can use AJAX with custom code. @bart, do you have any insight on how to properly go about this?

Modal popup structure:


.testimonials-modal-bg {
  position: fixed;
  left: 0px;
  top: 0px;
  right: 0px;
  bottom: 0px;
  z-index: 1010;
  display: none;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.42);

.container {
  position: relative;
  top: 50%;
  padding: 30px;
  background-color: white;
  box-shadow: black 0px 0px 15px -4px;
  -webkit-transform: translate(0px, -50%);
  -ms-transform: translate(0px, -50%);
  transform: translate(0px, -50%);

.modal-container {
  margin-top: 30px;

Open modal interaction

Close modal interaction


Webflow.push(function() {

  /* Config */
  var trigger = $('.testimonial-view-button');
  var modalcontainer = $('.modal-container');

  /* Awesome code */ {
    var reflink = $(this).attr('href');

      url: reflink,
      success: function(data) {
        data = $(data).find('.testimonial-source-div');
1 Like

I have a bookmark folder that I use for useful Webflow tricks and tips.

Seems @bart’s name is associated to a lot of them.


Thanks for your help!!!

The code automatically takes the url from your CMS-generated buttons. Hope it is working for you :) Let me know if you need any other help!

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.