Programas, lenguajes y marcos utilizados: Java IntelIJIdea SpringSecurity Thymleaf Html JavaScript
Tengo una página product.html en la que hay un producto. El usuario hace clic en el botón del artículo del pedido. Estoy enviando una señal al servidor. Si el objeto se agrega con éxito a la base de datos, llamo a la misma ventana con un parámetro bool adicional.
Necesito hacer que si bool es verdadero, aparezca una ventana modal con el mensaje de que el producto se ha agregado al carrito.
El problema es que si uso thymeleaf como condición para iniciar la ventana,
<div th:if="${openModal}"> <a href="#openModal">Открыть модальное окно</a> <div class="product_modal_window" id="openModal"> <div> <a class="close" href="#close" title="Закрыть">X</a> <h2>Добавлено</h2> <p>The product has been added to your cart, continue shopping or go to the cart?</p> </div> </div> </div>entonces no sé cómo cambiar el valor de openModal de verdadero a falso (si es posible) al hacer clic en el botón de cerrar.
Si uso la opción con my_window:target. Al seleccionar, mostrar la ventana usando una pseudoclase y luego al hacer clic en la cruz para eliminar la selección de la ventana, entonces no sé cómo determinar si la ventana debe abrirse esta vez o no al iniciar la ventana usando un variable del servidor.
La forma canónica de hacer esto es usar atributos de redirección/flash. En su controlador, haría algo como esto:
@PostMapping("/products") public String doAddProduct(@ModelAttribute("product") AddProductFormData formData, RedirectAttributes redirectAttributes) { service.addProduct(formData); redirectAttributes.addFlashAttribute("productAdded", formData.productName()); return "redirect:/products"; } En su plantilla, puede usar productAdded :
<div th:if="${productAdded}"> <div>The product with name [[${productAdded}]] was added.</div> </div>La ventaja de usar el atributo flash es que si la página se actualiza, el atributo flash desaparece y el mensaje ya no se muestra.
Dicho esto, si desea darle al usuario la opción de descartar manualmente el cuadro de diálogo, usaría algo como https://alpinejs.dev/ :
La plantilla sería:
<div th:if="${productAdded}"> <div class="product_modal_window" id="openModal" x-data="{ open: true }" x-show="open"> <div> <a class="close" @click="open = false" title="Закрыть">X</a> <h2>Добавлено</h2> <p>The product has been added to your cart, continue shopping or go to the cart?</p> </div> </div> </div>Sin embargo, el problema se resolvió, quizás de una manera bastante tosca. Escribí el resultado en un campo oculto. Y luego uso JavaScript para activar o desactivar esta ventana.
html
<input type="hidden" id="openModalValue" th:value="${openModalValue}"> <div class="product_modal_window" id="modalWindow"> <div> <h2>Added</h2> <p>The product has been added to your cart, continue shopping or go to the cart?</p> <input class="product_popup_button" type="image" src="/static/images/elements/product/product/Blue_original.png" alt="Continue shopping" onclick="PopupCloseById('modalWindow')"> enter code here </div> </div>JavaScript
function TogglePopup() { const openModal = document.getElementById("openModalValue"); const openValue = (openModal.value === 'true'); const popup = document.getElementById("modalWindow"); if (openValue) { popup.classList.add('open'); } else { popup.classList.remove('open'); } } function PopupCloseById(id) { const popup = document.getElementById(id); popup.classList.remove('open'); } .product_modal_window { 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; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; }CSS
.product_modal_window.open { display: block; pointer-events: auto; } .product_modal_window > div { width: 400px; height: 200px; position: relative; margin: 15% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); }