Hola a todos, estoy trabajando en la creación de declaraciones condicionales para mi modal de arranque, pero noto que si la condición no funciona y no sé por qué.
<!--Awaiting Verification Modal --> <div class="modal fade" id="awaitModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-body p-5" align="center"> <h3>Awaiting Profile Verification and Confirmation.</h3> <h5>Check your email for more details</h5> </div> </div> </div> </div> <!--Verify Modal --> <div class="modal fade" id="verifyModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="verifyModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-body p-5" align="center"> <h3>Your withdrawal Verification has been confirmed.</h3> <button class="btn btn-success">Proceed</button> </div> </div> </div> </div> <script> $(window).on('load', function() { if({{awaitingapproval() == 1}}) { $('#awaitModal').modal('show'); } else if({{awaitingapproval() == 2}}) { $('#verifyModal').modal('show'); } else { $('#awaitModal').modal('hide'); $('#verifyModal').modal('hide'); } }); </script>Cuando comento else if se muestra la condición if modal, pero cuando else if está allí, no se muestra, de hecho, no se muestra modal. Por favor, que alguien me ayude.
Su declaración if era incorrecta. ¡Cambié un poco el código y ahora funciona bien! Puedes probarlo. Genero un número aleatorio entre 1 y 4 y lo coloco en la variable en awaitingapproval de aprobación, como puede ver a continuación, si es 1 o 2, se mostrará el modal correcto. Simplemente presione ejecutar fragmento de código para obtener 1 o 2 o puede cambiar el valor.
$(window).on('load', function() { const awaitingapproval = Math.floor(Math.random() * (4 - 1 + 1) + 1) const awaitingapprovalNumber = document.querySelector('#awaitingapprovalNumber') awaitingapprovalNumber.innerHTML = awaitingapproval if (awaitingapproval === 1) { $('#awaitModal').modal('show'); return; // Show await modal and then stop the code } if (awaitingapproval === 2) { $('#verifyModal').modal('show'); return; // Show verify modal and then stop the code } // If awaitingapproval is not 1 or 2 then hide all modals $('#awaitModal').modal('hide'); $('#verifyModal').modal('hide'); }); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"/> <p id="awaitingapprovalNumber"></p> <div class="modal fade" id="awaitModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="exampleModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-body p-5" align="center"> <h3>Awaiting Profile Verification and Confirmation.</h3> <h5>Check your email for more details</h5> </div> </div> </div> </div> <!--Verify Modal --> <div class="modal fade" id="verifyModal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false" aria-labelledby="verifyModalLabel" aria-hidden="true"> <div class="modal-dialog modal-dialog-centered" role="document"> <div class="modal-content"> <div class="modal-body p-5" align="center"> <h3>Your withdrawal Verification has been confirmed.</h3> <button class="btn btn-success">Proceed</button> </div> </div> </div> </div>