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?
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>Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments