【发布时间】：2023-02-10 20:56:13
【问题描述】：
我有一个带有下一个/上一个按钮的多模式。我希望我的模式在页面加载后立即自动打开。
现在我必须按下“打开模式”按钮，我想删除该按钮。
感谢您的帮助
- 页面加载后立即打开模式
- 删除“打开模式”按钮
- 模态是多重的
$(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>
【问题讨论】：
-
它可以像在
document上为DOMContentLoaded事件处理程序一样简单，它只会将click事件分派给按钮（或者执行与点击处理程序相同的逻辑），从那里你也可以隐藏按钮或做任何其他事情 -
$('#openModalBtn').trigger('click');应该已经完成了这项工作，前提是您在将点击处理程序添加到元素后调用它。
标签： javascript html