Modifier la fermeture d'une boite de dialogue

**flexi2202** · 01/10/2022, 14h00

Bonjour a tous

sur ce site j'avais vu un plugin génial mais que je ne retrouve plus

lorsque je fermais la boite de dialogue on voyait la boite de dialogue partir vers le coin supérieur de l'écran tout en se fermant

c'était sur cette page

https://jqueryui.com/dialog/#animated

cela fait plusieurs jours que je recherche un exemple , mais impossible a trouver ...

cela se passe dans le hide apparemment
je souhaiterais donc avoir un effet visuel de la boite de dialogue qui se ferme tout en se dirigeant vers le coin supérieur droit
voici le code

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jQuery UI Dialog - Animation</title>
<link rel="stylesheet" href="//code.jquery.com/ui/1.13.2/themes/base/jquery-ui.css">
<link rel="stylesheet" href="/resources/demos/style.css">
<script src="https://code.jquery.com/jquery-3.6.0.js"></script>
<script src="https://code.jquery.com/ui/1.13.2/jquery-ui.js"></script>
<script>
$( function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).on( "click", function() {
$( "#dialog" ).dialog( "open" );
});
} );
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the &apos;x&apos; icon.</p>
</div>
<button id="opener">Open Dialog</button>
</body>
</html>

**Toufik83** · 02/10/2022, 14h01

Bonjour,

En gardant le même effet "explode" ou bien avec l'effet fold ? voir l'exemple en bas de page.

Voir aussi la liste des effets possibles dans la liste déroulante.

Sinon pour déplacer la fenêtre dialogue vous pouvez utiliser l'option position en parallèle avec l'option beforeClose :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
$("#dialog").dialog({
    .... ,
    beforeClose: function(event, ui) {
      $(this).dialog("widget").position({
        my: 'right top',//déplacer le dialog à partir de sa droite supérieur
	at: 'right top',// vers la droite supérieur 
	of: $('body'), // de  body
        using: function (pos, ext) {
            $(this).animate({ top:pos.top }, 600);
        }
      });
    }
});

Vous pouvez remplacer body par un autre conteneur sinon...

**flexi2202** · 03/10/2022, 11h10

Super cela a fini par fonctionner
un très grand merci

Modifier la fermeture d'une boite de dialogue

jQuery

Vue hybride

Discussions similaires

Partager

Partager