javascript 自动打开多模态

7xllpg7q  于 2023-02-11  发布在  Java
关注(0)|答案(1)|浏览(123)

我有一个多模态与下一个/上一个按钮。我希望我的模态,以自动打开,只要网页加载。
现在我必须按下"打开模式"按钮,我想删除该按钮。
谢谢你的帮助
1.页面加载后立即打开模态
1.删除"打开模态"按钮
1.模态是多模态的

$(document).ready(function() {
  var data = [];
  currentModal = 0;
  $('.modalDialog').each(function() {
    data.push({
      id: $(this).attr('id'),
      order: $(this).data('modalorder')
    });
  })

  $('#openModalBtn').click(function() {
    currentModal = 0;
    window.location.href = "#" + data[currentModal].id;
    $('#' + data[currentModal].id).find('.getAssignment2').prop('disabled', true);
  })

  // prev
  $('.getAssignment2').click(function() {
    if (currentModal > 0) {
      currentModal--;
      window.location.href = "#" + data[currentModal].id;
    } else {

      window.location.href = '#'
    }
  })

  // next
  $('.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 = '#'
    }
  })

})
.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 {
  cursor: pointer;
  background: linear-gradient(to left, #ffa400 0%, #ffa400 0%, #ff5f00f0 75%) !important;
  border: none;
  border-radius: 25px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 30px;
  margin-top: 10px;
}

.getAssignment:hover {
  background: linear-gradient(to left, #90d2fb 0%, #0891d2 0%, #09629b 55%) !important;
}
<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>

<input type="button" id="openModalBtn" value="Open Modal">

<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="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" multiple>
        <option value="hombre">Man</option>
        <option value="mujer">Women</option>

      </select>
      <input class="getAssignment" type="button" value="Siguiente">
    </center>
  </div>
</div>
kmpatx3s

kmpatx3s1#

将您的开放模式代码移到一个单独命名的函数中,以便您可以在两个地方使用它
1.在文档就绪函数中直接调用
1.将其注册到单击处理程序

$(document).ready(function() {
  var data = [];
  currentModal = 0;
  $('.modalDialog').each(function() {
    data.push({
      id: $(this).attr('id'),
      order: $(this).data('modalorder')
    });
    // call open modal on document ready
    openModal();
  })

// register the named function to the click handler
  $('#openModalBtn').click((event)=>openModal());

// moved to a separate named function, so it can be called directly
function openModal(){
    currentModal = 0;
    window.location.href = "#" + data[currentModal].id;
    $('#' + data[currentModal].id).find('.getAssignment2').prop('disabled', true);
}

  // prev
  $('.getAssignment2').click(function() {
    if (currentModal > 0) {
      currentModal--;
      window.location.href = "#" + data[currentModal].id;
    } else {

      window.location.href = '#'
    }
  })

  // next
  $('.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 = '#'
    }
  })

})
.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 {
  cursor: pointer;
  background: linear-gradient(to left, #ffa400 0%, #ffa400 0%, #ff5f00f0 75%) !important;
  border: none;
  border-radius: 25px;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 5px 30px;
  margin-top: 10px;
}

.getAssignment:hover {
  background: linear-gradient(to left, #90d2fb 0%, #0891d2 0%, #09629b 55%) !important;
}
<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>

<input type="button" id="openModalBtn" value="Open Modal">

<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="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" multiple>
        <option value="hombre">Man</option>
        <option value="mujer">Women</option>

      </select>
      <input class="getAssignment" type="button" value="Siguiente">
    </center>
  </div>
</div>

相关问题