实现多模态框页面加载自动打开并移除触发按钮

以下是满足需求的修改后代码：

HTML 代码 #

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

<div id="openModal1" class="modalDialog" data-modalorder="1">
  <div>
    <a href="#close" title="Close" class="close">X</a>
    <h3 style="text-align: center; font-weight: 600;">Hello</h3>
    <p style="text-align: center;">Answer the questions</p>
    <center>
      <input class="getAssignment" type="button" value="Iniciar">
    </center>
  </div>
</div>

<div id="openModal2" class="modalDialog" data-modalorder="2">
  <div>
    <a href="#close" title="Close" class="close">X</a>
    <h3 style="text-align: center; font-weight: 600;">Birthday</h3>
    <center>
      <input type="date" id="birthday" name="birthday">
      <br>
      <input class="getAssignment2" type="button" value="Previous">
      <input class="getAssignment" type="button" value="Siguiente">
    </center>
  </div>
</div>

<div id="openModal3" class="modalDialog" data-modalorder="3">
  <div>
    <a href="#close" title="Close" class="close">X</a>
    <h2 style="text-align: center; font-weight: 600;">Gender</h2>
    <center>
      <select name="work_days" id="id_work_days">
        <option value="hombre">Man</option>
        <option value="mujer">Women</option>
      </select>
      <br>
      <input class="getAssignment2" type="button" value="Previous">
      <input class="getAssignment" type="button" value="Finish">
    </center>
  </div>
</div>

CSS 代码 #

.modalDialog {
  position: fixed;
  font-family: Arial, Helvetica, sans-serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.8);
  z-index: 99999;
  opacity: 0;
  -webkit-transition: opacity 400ms ease-in;
  -moz-transition: opacity 400ms ease-in;
  transition: opacity 400ms ease-in;
  pointer-events: none;
}

.modalDialog:target {
  opacity: 1;
  pointer-events: auto;
}

.modalDialog>div {
  width: 400px;
  position: relative;
  margin: 10% auto;
  padding: 5px 20px 13px;
  border-radius: 10px;
  background: #fff;
}

.close {
  background: #606061;
  color: #FFFFFF;
  line-height: 25px;
  position: absolute;
  right: -12px;
  text-align: center;
  top: -10px;
  width: 24px;
  text-decoration: none;
  font-weight: bold;
  -webkit-border-radius: 12px;
  -moz-border-radius: 12px;
  border-radius: 12px;
  -moz-box-shadow: 1px 1px 3px #000;
  -webkit-box-shadow: 1px 1px 3px #000;
  box-shadow: 1px 1px 3px #000;
}

.close:hover {
  background: #00d9ff;
}

.getAssignment, .getAssignment2 {
  cursor: pointer;
  background: linear-gradient(to left, #ffa400 0%, #ffa400 0%, #ff5f00f0 75%) !important;
  border: none;
  border-radius: 25px;
  color: #fff;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  padding: 5px 30px;
  margin: 10px 5px 0;
}

.getAssignment:hover, .getAssignment2:hover {
  background: linear-gradient(to left, #90d2fb 0%, #0891d2 0%, #09629b 55%) !important;
}

JS 代码 #

$(document).ready(function() {
  var data = [];
  let currentModal = 0;
  
  // 收集所有模态框数据
  $('.modalDialog').each(function() {
    data.push({
      id: $(this).attr('id'),
      order: $(this).data('modalorder')
    });
  });

  // 上一页按钮逻辑
  $('.getAssignment2').click(function() {
    if (currentModal > 0) {
      currentModal--;
      window.location.href = "#" + data[currentModal].id;
      // 启用当前模态框的下一页按钮
      $('#' + data[currentModal].id).find('.getAssignment').prop('disabled', false);
    } else {
      window.location.href = '#'
    }
  });

  // 下一页按钮逻辑
  $('.getAssignment').click(function() {
    if (currentModal < data.length - 1) {
      currentModal++;
      // 如果是最后一个模态框，禁用下一页按钮
      if (currentModal === data.length - 1) {
        $('#' + data[currentModal].id).find('.getAssignment').prop('disabled', true);
      }
      window.location.href = "#" + data[currentModal].id;
    } else {
      window.location.href = '#'
    }
  });

  // 页面加载完成后自动打开第一个模态框
  window.location.href = "#" + data[currentModal].id;
});

修改说明 #

1. 移除触发按钮：直接删除了HTML中的<input type="button" id="openModalBtn" value="Open Modal">元素。
2. 自动打开第一个模态框：在JS的$(document).ready函数末尾，直接执行锚点跳转逻辑，页面加载完成后自动触发第一个模态框显示。
3. 完善切换功能：
   • 给第二个、第三个模态框补充了上一页按钮（getAssignment2类），确保上一页功能可用；
   • 调整CSS样式，让上一页按钮和下一页按钮样式统一、并排显示；
   • 优化按钮状态逻辑，切换回上一页时重新启用下一页按钮，避免按钮持续禁用；
   • 修正了原代码中未使用的按钮状态设置逻辑，让切换逻辑更完整。

内容的提问来源于stack exchange，提问作者chris_fv