Javascript 如何使用js按特定顺序运行弹出窗口？

我试图在弹出窗口中添加“下一步”按钮。该按钮以随机顺序逐个加载弹出窗口。但是我想以特定的顺序（升序）运行弹出窗口。另外，当最终弹出窗口打开时，要自动禁用“下一步”按钮。我如何使用此代码来完成它？请帮我解决这个问题

这是我的密码

$(document).ready(function() {
   $(".getAssignment").click(function() {
      var $divs = $(".modalDialog");
      if ($divs.length > 0) {
         window.location.href = "#" + $divs[ Math.floor(Math.random() * $divs.length) ].id;
      }
   });
});

<input class="getAssignment" type="button" value="Open Modal">

<div id="openModal" class="modalDialog">
    <div>
    <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">
    <div>   
   <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>

$（文档）.ready（函数（）{
$（“.getAssignment”）。单击（函数（）{
变量$divs=$（“.modalDialog”）；
如果（$divs.length>0）{
window.location.href=“#”+$divs[Math.floor（Math.random（）*$divs.length）].id；
}
});
});
模式框1
这是一个示例模态框，可以使用CSS3的功能创建

你可以在这里做很多事情，比如在网站加载时弹出广告，或者为用户创建登录/注册表单

模式框2
这是一个示例模态框，可以使用CSS3的功能创建

你可以在这里做很多事情，比如在网站加载时弹出广告，或者为用户创建登录/注册表单

---

您可以使用元素上的

数据-

属性来定义顺序。在转到下一个模态时，检查是否存在更多模态。如果不存在，请禁用“下一步”按钮

$（文档）.ready（函数（）{
var currentmodal=1；
$（“.getAssignment”）。单击（函数（）{
变量$divs=$（“.modalDialog”）；
var modal=$（“*[data modalorder=“+（currentmodal++）+”]）；
如果（！$（“*[data modalorder=“+currentmodal+”]）。长度）
{
modal.find（“input.getAssignment”）.prop（“disabled”，true）；
}
如果（$divs.length>0&&modal）{
window.location.href=“#”+$（模态）.attr（“id”）；
}
});
});
.modalDialog{
位置：固定；
字体系列：Arial、Helvetica、无衬线字体；
排名：0；
右：0；
底部：0；
左：0；
背景：rgba（0,0,0,0.8）；
z指数：99999；
不透明度：0；
-webkit过渡：不透明度400ms缓进；
-moz过渡：不透明度400ms缓进；
过渡：不透明度400ms缓进；
指针事件：无；
}
.modalDialog：目标{
不透明度：1；
指针事件：自动；
}
.modalDialog>div{
宽度：400px；
位置：相对位置；
利润率：10%自动；
填充：5px20px 13px 20px；
边界半径：10px；
背景：#fff；
背景：-moz线性梯度（#fff，#999）；
背景：-webkit线性梯度（#fff，#999）；
背景：-o-线性梯度（#fff，#999）；
}
.结束{
背景:#606061；
颜色：#FFFFFF；
线高：25px；
位置：绝对位置；
右：-12px；
文本对齐：居中；
顶部：-10px；
宽度：24px；
文字装饰：无；
字体大小：粗体；
-webkit边界半径：12px；
-moz边界半径：12px；
边界半径：12px；
-莫兹盒阴影：1px 1px 3px#000；
-网络工具包盒阴影：1px 1px 3px#000；
盒影：1px 1px 3px#000；
}
.关闭：悬停{
背景：#00d9ff；
}

模式框1
这是一个示例模态框，可以使用CSS3的功能创建

你可以在这里做很多事情，比如在网站加载时弹出广告，或者为用户创建登录/注册表单

模式框2
这是一个示例模态框，可以使用CSS3的功能创建

你可以在这里做很多事情，比如在网站加载时弹出广告，或者为用户创建登录/注册表单

模式框3
这是一个示例模态框，可以使用CSS3的功能创建

你可以在这里做很多事情，比如在网站加载时弹出广告，或者为用户创建登录/注册表单