I recently attempted to implement a next button in the popup box to run popups in a specific order. I also made sure that when the final popup opens, the button automatically disables itself. However, there seems to be an issue. When I delete certain modals, the code stops working. My goal is to have the popups run in the correct order even if some are deleted and also add a previous button. How can I achieve this? Any assistance in resolving this issue would be greatly appreciated.
Below is the code snippet I utilized:
$(document).ready(function() {
var currentmodal = 1;
$(".getAssignment").click(function() {
var $divs = $(".modalDialog");
var modal = $("*[data-modalorder="+(currentmodal++)+"]");
if(!$("*[data-modalorder="+currentmodal+"]").length)
{
modal.find("input.getAssignment").prop("disabled",true);
}
if ($divs.length > 0 && modal) {
window.location.href = "#" + $(modal).attr("id");
}
});
});
$(document).ready(function() {
var currentmodal = 1;
$(".getAssignment2").click(function() {
var $divs = $(".modalDialog");
var modal = $("*[data-modalorder="+(currentmodal--)+"]");
if(!$("*[data-modalorder="+currentmodal+"]").length)
{
modal.find("input.getAssignment2").prop("disabled",true);
}
if ($divs.length > 0 && modal) {
window.location.href = "#" + $(modal).attr("id");
}
});
});
<input class="getAssignment" type="button" value="Open Modal">
<div id="openModal" class="modalDialog" data-modalorder=1>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
<a href="#close" title="Close" class="close">X</a>
<h2>Modal Box 1</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>
<div id="openModal2" class="modalDialog" data-modalorder=2>
<div>
<input class="getAssignment2" type="button" value="Previous">
<input class="getAssignment" type="button" value="Next">
<a href="#close" title="Close" class="close">X</a>
<h2>Modal Box 2</h2>
<p>This is a sample modal box that can be created using the powers of CSS3.</p>
<p>You could do a lot of things here like have a pop-up ad that shows when your website loads, or create a login/register form for users.</p>
</div>
</div>