Discussion :

[Anibel]

Bonjour tout le monde.
J'utilise le script suivant pour afficher un dialog box :

Code javascript :

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
 
$(function() {
    $('.openmodalbox').click(function() {
        $(this).find('.modalboxContent').dialog({
		width: 'auto',
		height:'auto',
		resizable: false,
		show: 'highlight',
		hide: 'highlight',
            open: function() {
                $('#myDate').datepicker({title:''}).blur();
            },
            close: function() {
                $('#myDate').datepicker('destroy');
            },
 
        });
    });
});
$(document).mousedown(function(e) {
    var clicked = $(e.target); // get the element clicked
    if ( clicked.parents().is('.modalboxContent')||clicked.is('.ui.dialog-titlebar')|| clicked.is('.ui-widget-header')|| clicked.parents().is('#ui-datepicker-div')) {
        return; // click happened within the dialog, do nothing here
    } else { // click was outside the dialog, so close it
        $('.modalboxContent').dialog("close");
    }
});

Je n'arrive a fermer le dialog box en cliquant à l'extérieur sachant que cela fonctionne quand j'élimine "(this).find" dans la 3ème ligne.

Merci d'avance pour votre aide.

[Anibel]

C'est bon, j'ai trouvé une solution que je partage avec vous
Il suffit d'ajouter "modal:true," er remplacer les dérnières lignes avec le bloc "Nouveau code"

Code javascript :

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
37
38
 
$(function() {
    $('.openmodalbox').click(function() {
        $(this).find('.modalboxContent').dialog({
		width: 'auto',
		height:'auto',
		resizable: false,
		show: 'highlight',
		hide: 'highlight',
		modal:true,
            open: function() {
                $('#myDate').datepicker({title:''}).blur();
            },
            close: function() {
                $('#myDate').datepicker('destroy');
            },
 
        });
    });
});
 
//--------------------Nouveau code
$(document).ready(function()
{
    $(document.body).on("click", ".ui-widget-overlay", function()
    {
        $.each($(".ui-dialog"), function()
        {
            var $dialog;
            $dialog = $(this).children(".ui-dialog-content");
            if($dialog.dialog("option", "modal"))
            {
                $dialog.dialog("close");
            }
        });
    });;
});
//--------------------Fin nouveau code

Bonne journée