How to incorporate AJAX into Webflow for popup DIVs

Design help Custom code
6

Modal popup structure:

CSS

.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

245×533 23.6 KB

Close modal interaction

Script

<script>
Webflow.push(function() {

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

  /* Awesome code */
  trigger.click(function(e) {
    e.preventDefault();
    
    var reflink = $(this).attr('href');

    $.ajax({
      url: reflink,
      success: function(data) {
        data = $(data).find('.testimonial-source-div');
        modalcontainer.html(data.html());
      }
    });
  });
  
});
</script>
1 Like