Lo que quiero lograr es crear dos botones: 1: que abre la ventana modal 2: abre el mismo modal y se desplaza hacia abajo
código:
$('#menu-item-6706').on('click', function (){ $('#exampleModal').on('shown.bs.modal', function (event) { $("#exampleModal .modal-body").animate({ scrollTop: $('#exampleModal .modal-body').prop("scrollHeight")}, 'slow'); }); });Aquí está el fragmento jsfiddle completo: https://jsfiddle.net/mkx2auhj/1/
El script casi funciona:
Si activa por primera vez "iniciar demostración modal", se abre modal. Si activa "Contacto", se abre modal y se desplaza hacia abajo. Así que es correcto.
El problema es que si vuelve a presionar "iniciar demostración modal", se desplaza hacia abajo nuevamente, lo cual no es deseable. Quiero que abra el modal estándar como la primera vez.
¿Tiene un montón de botones que activan el mismo modal con contenidos ligeramente diferentes? Use
event.relatedTargety HTML data-bs-* para variar el contenido del modal según el botón en el que se hizo clic. https://getbootstrap.com/docs/5.1/components/modal/#variing-modal-content
Mueva el detector de eventos 'shown.bs.modal' fuera del evento de clic y use event.relatedTarget para detectar cuándo el botón "Contacto" alterna el modal y luego anime el modal en consecuencia. Prueba esto
$('#exampleModal').on('shown.bs.modal', function (event) { if( $(event.relatedTarget).is('#menu-item-6706') ){ $("#exampleModal .modal-body").animate({ scrollTop: $('#exampleModal .modal-body').prop("scrollHeight") }, 'slow'); } });