Estoy tratando de implementar la interfaz de usuario del diálogo jQuery para mostrar un mensaje determinado al usuario.
He incluido la biblioteca jQuery en mi página HTML:
<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script> <script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />Mi código JavaScript:
document.getElementById("save").addEventListener('click',function(){ $( function() { $( "#dialog" ).dialog({ modal: true, autoOpen: false, width:"auto", height:"auto", show: { effect: "slide", duration: 1000 }, hide: { effect: "transfer", duration: 1000 } }); $( "#dialog" ).dialog( "open" ); } ); })El cuadro de diálogo se abre pero no se cierra, no importa cuántas veces intente cerrarlo, aparece este error:
TypeError no detectado: no se pueden leer las propiedades de undefined (leyendo 'superior')
en e.effects.effect.transfer (jquery-ui.min.js:11:4184)
en HTMLDivElement.i (jquery-ui.min.js:10:24550)
en Function.dequeue (jquery-1.11.1.min.js:3:2066)
en HTMLDivElement. (jquery-1.11.1.min.js:3:2522)
en Function.each (jquery-1.11.1.min.js:2:2973)
en m.fn.init.each (jquery-1.11.1.min.js:2:835)
en m.fn.init.queue (jquery-1.11.1.min.js:3:2427)
en m.fn.init.effect (jquery-ui.min.js:10:24778)
en m.fn.init.hide (jquery-ui.min.js:10:25098)
en e.Widget. [como _ocultar] (jquery-ui.min.js:6:13404)
Incluso intenté cerrar el cuadro de diálogo mediante programación.
$("#dialog").dialog('close');Pero sigue mostrando el mismo error. ¿Cómo puedo solucionar esto?
Lea la documentación del efecto de transferencia de jQuery .
Ese efecto necesita un "destino". Tiene que ser otro elemento.
Entonces habrá una animación entre el elemento en el que se llama el efecto A otro elemento...
¡Y actualice las versiones que está usando! jQuery 1.11.1 tiene más de 10 años.
$("#dialog").dialog({ modal: true, autoOpen: false, width: "auto", height: "auto", show: { effect: "slide", duration: 1000 }, hide: { effect: "transfer", to: $(".transfer-destination"), // A destination was missing duration: 1000 } }) document.getElementById("save").addEventListener('click', function() { $("#dialog").dialog("open") }) button{ margin-bottom:2em; } .transfer-destination { padding: 2em; border: 1px solid black; background-color: cyan; width: 10em; } .ui-effects-transfer { /* this is styling for the transitionning element */ border: 2px dotted red; background-color: yellow; opacity: 0.3; } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/jquery-ui.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.13.2/themes/smoothness/theme.min.css" /> <button id="save">Save</button><br> <div class="transfer-destination">Destination of the closed dialog</div> <div id="dialog" class="">A certain message</div>