Javascript 如何在弹出窗口中添加上一个按钮？

我试图在弹出框中添加“下一步”按钮。现在可以按特定顺序运行弹出窗口。此外，当最终弹出窗口打开时，按钮将自动禁用。但有一个问题。当我删除一些模态时，代码不起作用。我想按这个顺序运行弹出窗口，当我删除一些弹出窗口时，弹出窗口希望正确运行。另外，我想创建上一个按钮。我怎么做？请帮我解决这个问题

这是我使用的代码

$(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>

$（文档）.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”）；
}
});
});
$（文档）.ready（函数（）{
var currentmodal=1；
$（“.getAssignment2”）。单击（函数（）{
变量$divs=$（“.modalDialog”）；
var modal=$（“*[data modalorder=“+（currentmodal--）+”]）；
如果（！$（“*[data modalorder=“+currentmodal+”]）。长度）
{
modal.find（“input.getAssignment2”）.prop（“disabled”，true）；
}
如果（$divs.length>0&&modal）{
window.location.href=“#”+$（模态）.attr（“id”）；
}
});
});
模式框1
这是一个示例模态框，可以使用CSS3的功能创建

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

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

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

---

我不确定这是否是你想要的。但我试着重写了一下你的js

$（文档）.ready（函数（）{
var数据=[]；
currentModal=0；
$（'.modalDialog'）。每个（函数（）{
数据推送({
id:$（this.attr（'id'），
订单：$（this.data（'modalorder'））
});
})
$（'#openModalBtn'）。单击（函数（）{
currentModal=0；
window.location.href=“#”+数据[currentModal].id；
$（'#'+data[currentModal].id）.find（'.getAssignment2'）.prop（'disabled'，true）；
})
//上
$（'.getAssignment2'）。单击（函数（）{
如果（当前模式>0）{
当前模式--；
window.location.href=“#”+数据[currentModal].id；
}否则{
window.location.href='#'
}
})
//下一个
$（'.getAssignment'）。单击（函数（）{
如果（当前模式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；
}
.getAssignment{
光标：指针；
}

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

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

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

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

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

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

无论是单击“上一步”还是“下一步”，您都在执行相同的代码。您应该检查单击了哪个按钮（例如，按类或

数据

-属性），如果next=>

currentmodal++

如果previous=>

currentmodal--

是。你是对的。但是还有一个问题。当禁用next按钮时，我尝试使用previous按钮。当previous按钮被禁用时，这两个按钮都被禁用。问题是什么？你的行

modal.find（“input.getAssignment”）.prop（“disabled”，true）；

禁用类的所有输入

.getAssignment

-这是下一个按钮和上一个按钮。您可以给每个按钮一个单独的类或id，然后通过该按钮禁用/重新启用它们是的。但是我现在看到了一个小问题。禁用下一个按钮时，我尝试使用上一个按钮。同样，当我尝试使用下一个按钮时在上，它工作不正常。你知道吗？单击

上一个

按钮后，你需要重新启用

下一个

按钮，反之亦然。否则，一旦你到达最后一个项目，

下一个

将被禁用并保持禁用状态，即使你正在单击

上一个

。（您的按钮不知道您正在查看的是哪个模式）=>这将是处理此问题的另一种可能性：在

$（.getAssignment）上单击（）

检查哪个模式当前可见，如果是第一个模式，请禁用

上一个

按钮（否则启用），如果