Changing contents of a modal upon a button click

Question

I am currently trying to create a markup of a popup modal in HTML/CSS like on this jsfiddle https://jsfiddle.net/ta5zrvxc/

.modalContainer {
  width: 350px;
  height: 300px;
  box-shadow: 0px 28px 28px 9px rgba(0, 0, 0, 0.30);
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  padding: 20px;
  font-family: 'Montserrat'
}

button {
  margin: 25px 22px 0;
  background-color: green;
  border: 0;
  padding: 13px 30px;
  color: white;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 21px;
  border-radius: 5px;
}

<div class="modalContainer">
  <div class="modalContents">
    <h1>This is Modal 1</h1>
    <button>Go to Next</button>
  </div>
</div>

What I would to do is upon clicking the button i want to change the contents of the modal to like this for example. https://jsfiddle.net/k7fht5s6/

.modalContainer {
  width: 350px;
  height: 300px;
  box-shadow: 0px 28px 28px 9px rgba(0, 0, 0, 0.30);
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  padding: 20px;
  font-family: 'Montserrat'
}

button {
  margin: 25px 22px 0;
  background-color: green;
  border: 0;
  padding: 13px 30px;
  color: white;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 21px;
  border-radius: 5px;
}

<div class="modalContainer">
  <div class="modalContents">
    <h1>This is Modal 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis atque quo cupiditate. `enter code here`</p>
    <button>Go to Next</button>
  </div>
</div>

What are the ways I can achieve this?

mplungjan · Accepted Answer · 2020-03-31T06:14:31.717

Like this?

Note I remove the button if there is no more content

Scroll down for a simple jQuery version

const content = [
  "<h1>This is Modal 1</h1>",
  "<h1>This is Modal 2</h1> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.Perferendis atque quo cupiditate. </p>"
];

let cnt = 0;
window.addEventListener("load", function() {
  document.querySelector(".modalContents").addEventListener("click", function(e) {
    const tgt = e.target;
    if (tgt.tagName.toUpperCase() === "BUTTON") {
      cnt++;
      if (cnt < content.length) {
        this.innerHTML = content[cnt]
        if (cnt < content.length - 1) {
          this.innerHTML += '<button>Go to Next</button>'
        }
      }
    }
  })
  document.querySelector(".modalContents").innerHTML = content[cnt] + '<button>Go to Next</button>'
})

.modalContainer {
  width: 350px;
  height: 300px;
  box-shadow: 0px 28px 28px 9px rgba(0, 0, 0, 0.30);
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  padding: 20px;
  font-family: 'Montserrat'
}

button {
  margin: 25px 22px 0;
  background-color: green;
  border: 0;
  padding: 13px 30px;
  color: white;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 21px;
  border-radius: 5px;
}

<div class="modalContainer">
  <div class="modalContents">
  </div>
</div>

I would recommend you just show and hide stuff instead:

$(function() {
  $("#page1").show()
  $("button").on("click", function() {
    $parent = $(this).closest(".modalContainer") 
    if ($parent.next().is(".modalContainer")) {
      $parent.fadeOut("slow",
        function() {
          $parent.next().fadeIn("slow")
        })
    }
  })
})

.modalContainer {
  width: 350px;
  height: 300px;
  box-shadow: 0px 28px 28px 9px rgba(0, 0, 0, 0.30);
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  padding: 20px;
  font-family: 'Montserrat';
  display: none;
}

button {
  margin: 25px 22px 0;
  background-color: green;
  border: 0;
  padding: 13px 30px;
  color: white;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 21px;
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modalContainer" id="page1">
  <div class="modalContents">
    <h1>This is Modal 1</h1><button>Go to Next</button>
  </div>
</div>
<div class="modalContainer" id="page2">
  <div class="modalContents">
    <h1>This is Modal 2</h1><button>Go to Next</button>
  </div>
</div>
<div class="modalContainer" id="page3">
  <div class="modalContents">
    <h1>This is Modal 3</h1>
  </div>
</div>

Just the content

$(function() {
  $("#page1").show();
  const $contents = $(".modalContents");
  const length = $contents.length;
  let idx = 0;
  $("button").on("click", function() {
    if (idx < length - 1) {
      $contents.eq(idx).fadeOut("slow",
        function() {
          idx++;
          if (idx >= length-1) $(".modalContainer button").fadeOut();
          $contents.eq(idx).fadeIn("slow")
        })
    }
  })
})

.modalContents {
  display: none;
}

.modalContainer {
  width: 350px;
  height: 300px;
  box-shadow: 0px 28px 28px 9px rgba(0, 0, 0, 0.30);
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  padding: 20px;
  font-family: 'Montserrat';
}


button {
  margin: 25px 22px 0;
  background-color: green;
  border: 0;
  padding: 13px 30px;
  color: white;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 21px;
  border-radius: 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modalContainer">
  <div class="modalContents" id="page1">
    <h1>This is Modal 1</h1>
  </div>
  <div class="modalContents" id="page2">
    <h1>This is Modal 2</h1>
  </div>
  <div class="modalContents" id="page3">
    <h1>This is Modal 3</h1>
  </div>
  <button>Go to Next</button>
</div>

I like this solution, is there a way that only the contents fades in and out in the transition? leaving the modal container in place? — DexPapa, Mar 31 '20 at 01:37

score 1 · Answer 2 · answered Mar 30 '20 at 12:22

Variety of ways you can do this:

If you're using a framework like Angular/Vue/React, you can set the internal of the modal to display a route. Clicking a given button just changes the route content that is currently displayed in the modal. Lots of examples of this in the related framework docs (angular.io, etc). Thes days, this is probably the preferred approach as it avoids working with manipulating the DOM directly.

You can use an "object" tag to display the contents of a page via the "source" attribute. By switching the source attribute, you switch the internal contents. You can also use an iFrame (I've never been a fan of this method but it's common):

How to load an external webpage into a div of a html page

You can work with DocumentFragment, create a whole new DOM setup with whatever you want in it, and just append it to a top level div of your modal (after clearing the old one out). This API is very powerful, I've always liked working with it.

https://developer.mozilla.org/en-US/docs/Web/API/DocumentFragment

You can just replace the innerHTML of a given div with whatever you want (this is the least recommended method, but if your content is relatively benign it's acceptable). So:

const elem = document.querySelector([your-css-selector]);
elem.innerHTML = '<div>Your new content</div>';

Naturally, any of the above routines can be triggered by a button.onclick handler.

score 1 · Answer 3 · answered Mar 30 '20 at 12:22

add addEventListener(click) to button then get element then change data

document.getElementById("myBtn").addEventListener("click", function(){
  var x = document.getElementsByClassName("modalContents")[0];
  
  x.innerHTML = `<h1>This is Modal 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis atque quo cupiditate.</p>
    <button>Go to Next</button>`
});

.modalContainer {
  width: 350px;
  height: 300px;
  box-shadow: 0px 28px 28px 9px rgba(0,0,0,0.30);
  margin: 0 auto;
  box-sizing: border-box;
  border-radius: 10px;
  text-align: center;
  padding: 20px;
  font-family: 'Montserrat'
}

button  {
  margin: 25px 22px 0;
  background-color: green;
  border: 0;
  padding: 13px 30px;
  color: white;
  font-family: Montserrat;
  font-style: normal;
  font-weight: bold;
  font-size: 17px;
  line-height: 21px;
  border-radius: 5px;  
}

<div class="modalContainer">
  <div class="modalContents">
    <h1>This is Modal 1</h1>
    <button id="myBtn">Go to Next</button>
  </div>
</div>

score 0 · Answer 4 · answered Mar 30 '20 at 12:31

Instead of changing the content of the modal directly you could have them in your code hidden and use jQuery to show them. Example:

Live version: https://jsfiddle.net/2q37fLew/

<div class="modalContainer" id="modal1">
  <div class="modalContents">
    <h1>This is Modal 1</h1>
    <button>Go to Next</button>
  </div>
</div>

<div class="modalContainer" id="modal2">
  <div class="modalContents">
    <h1>This is Modal 2</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perferendis atque quo cupiditate.</p>
    <button>Go to Next</button>
  </div>
</div>

.modalContainer {
  /* your original code... */
  display: none;
}

/* your original code... */

$(document).ready(function () {
  var activeModal = 1;
  $('#modal' + activeModal).show();

  $('.modalContainer button').click(function () {
      $('#modal' + activeModal).fadeOut(300, function onComplete () {
      activeModal++;
      $('#modal' + activeModal).fadeIn();
    });
  });
});

You do not need jQuery, but you added jQuery as one of the post tags, so I am suggesting a solution with this library.

score 0 · Answer 5 · edited Mar 30 '20 at 12:57

You can call function on button click and get element that needs to be changed.

function changeContent() {
  document.getElementById("modal-heading").innerHTML = "This is Modal 2";
}

<div class="modalContainer">
  <div class="modalContents">
    <h1 id="modal-heading">This is Modal 1</h1>
    <button onclick="changeContent()">Go to Next</button>
  </div>
</div>

This is the most straight forward way. Depending upon your requirement, you can move to react and create modal component that will take content as props and display that content without reloading the page.

score 0 · Answer 6 · answered Mar 30 '20 at 13:19

0

You can simply add and remove a .active class using jQuery.

here is a demo https://codepen.io/Rahul_Ravindran/pen/xxGMPJG

I am not sure its right way, but it works.

answered Mar 30 '20 at 13:19

Rahul Ravindran

36
3

Changing contents of a modal upon a button click

6 Answers6