https://vycafoot.com/js/confirm-message-pop.js?tm=1748865976

1
2var nested_modals = new Array;
3var body_scrollTop = null;
4var body_scrollLeft = null;
5
6function add_nested_modal( id, options={}, do_show=true )
7{
8    console.log("add_nested_modal " + id);
9
10    if( nested_modals.length )
11    {
12        // On ouvre un nouveau Modal : On décalle les Z-index des modaux déjà ouverts
13        
14        set_nested_modal_z_index( 1055 );
15    }
16    else
17    {
18        body_scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
19        body_scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
20    }
21
22    var m = document.getElementById( id );
23
24    if( m )
25    {
26        /*
27        if( ! m.classList.contains('modal') )
28            m = m.firstChild;
29        */
30        var modal = new bootstrap.Modal(m, options);
31
32        var zIndex = 1055;
33
34        nested_modals[ nested_modals.length ] = {
35            id : id,
36            modal: modal,
37            zIndex: zIndex
38        };
39
40        m.style.zIndex = zIndex;
41
42        m.addEventListener('shown.bs.modal', event => {
43
44            var id = event.currentTarget.id;
45            /*
46            if( ! id )
47                id = event.currentTarget.parentNode.id;
48            */
49            $('.modal-backdrop').last().css('z-index', zIndex - 5 ).attr('rel', id );
50            
51            event.stopPropagation();
52        });
53
54        m.addEventListener('hidden.bs.modal', event => {
55
56            var id = event.currentTarget.id;
57            /*
58            if( ! id )
59                id = event.currentTarget.parentNode.id;
60            */
61            remove_nested_modal( id );
62
63            event.stopPropagation();
64        });
65
66        if( do_show )
67        {
68            modal.show(m);
69
70            modal.handleUpdate();
71        }
72    }
73    // infos_nested_modal();
74}
75
76function remove_nested_modal( id=null )
77{
78    // console.log("remove_nested_modal " + id);
79
80    if( nested_modals.length )
81    {
82        var modal_informations = null;
83        var new_nested_modals = new Array;
84        
85        for( var i=0; i<nested_modals.length; i++ )
86        {
87            if( nested_modals[ i ].id==id )
88                modal_informations = nested_modals[ i ];
89            else
90                new_nested_modals[ new_nested_modals.length ] = nested_modals[ i ];
91        }
92        nested_modals = new_nested_modals;
93
94        if( modal_informations )
95        {
96            var m = document.getElementById( modal_informations.id );
97
98            if( m )
99            {
100                if( ! m.classList.contains('modal') )
101                    m = m.firstChild;
102
103                modal_informations.modal.dispose( m );
104
105                m.style.display = 'none';
106            }
107        }
108
109        if( nested_modals.length==0 )
110        {
111            document.body.style.overflow = 'unset';
112            document.body.style.paddingRight = 'unset';
113            window.scrollTo({ top: body_scrollTop, left: body_scrollLeft, behavior: 'instant'});
114            body_scrollTop = null;
115            body_scrollLeft = null;
116        }
117        else
118        {
119            // On ferme un Modal : On décalle les Z-index des autres modaux
120            
121            set_nested_modal_z_index( 1065 );
122        }
123    }
124
125    // infos_nested_modal();
126}
127
128function infos_nested_modal()
129{
130    var info = '';
131    for( var i=0; i<nested_modals.length; i++ )
132        info += nested_modals[i].id + "=" + nested_modals[i].zIndex + " ";
133
134    if( info ) console.log( info );
135}
136
137function set_nested_modal_z_index( zIndex  )
138{
139    var n = nested_modals.length;
140
141    for( var i=0; i<n; i++ )
142    {
143        var m = document.getElementById( nested_modals[ i ].id );
144
145        if( m )
146        {
147            if( ! m.classList.contains('modal') )
148                m = m.firstChild;
149
150            nested_modals[ i ].zIndex = zIndex - 10 * n + 10 * i;
151
152            m.style.zIndex = nested_modals[ i ].zIndex;
153
154            const collection = document.getElementsByClassName("modal-backdrop");
155            for (let j = 0; j < collection.length; j++) {
156

157                if( collection[ j ].getAttribute('rel')==nested_modals[ i ].id )
158                    collection[ j ].style.zIndex = nested_modals[ i ].zIndex - 5;
159            }
160        }
161    }
162
163}
164
165
166
167
168
169function showInformationMessage(titre, contenu, width="", html=false )
170{
171    const regex = /\n/g;
172
173    var html = '<div class="modal-dialog modal-dialog-centered ' + width + '" role="document">' + 
174            '<div class="modal-content">' + 
175                '<div class="modal-header">' +
176                    '<h5 class="modal-title">' + titre + '</h5>' + 
177                    '<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>' + 
178                '</div>' + 
179                '<div class="modal-body">' + (html ? contenu : contenu.replace(regex, "<br>")) + '</div>' + 
180                '<div class="modal-footer">' +
181                    '<button type="button" class="btn btn-primary btn-sm" data-bs-dismiss="modal">Fermer</button>' + 
182                '</div>' +
183            '</div>' +
184        '</div>';
185
186    set_content_confirm_and_open( titre, html );
187    
188}
189
190function showConfirmMessage(titre, contenu, callbackSuccessFunction, callbackCloseFunction, btnSuccess, btnFailure, btnSuccessColor, btnFailureColor, extraMargin )
191{
192    const regex = /\n/g;
193
194    var dismiss_failure = "";
195    var dismiss_success = "";
196
197	if(typeof(titre)=='undefined')
198		titre = 'Demande de confirmation';
199
200	if(typeof(callbackCloseFunction)=='undefined' || (typeof(callbackCloseFunction) != 'function' && callbackCloseFunction==null))
201        dismiss_failure = ' data-bs-dismiss="modal"';
202
203    if(typeof(callbackSuccessFunction) != 'function' && callbackSuccessFunction==null)
204        dismiss_success = ' data-bs-dismiss="modal"';
205
206	if(typeof(btnSuccess)=='undefined')
207		btnSuccess = 'Confirmer';
208
209	if(typeof(btnFailure)=='undefined')
210		btnFailure = 'Annuler';
211
212    if(typeof(btnSuccessColor)=='undefined')
213        btnSuccessColor = 'btn-success';
214
215    if(typeof(btnFailureColor)=='undefined')
216        btnFailureColor = 'btn-secondary';
217
218    if(typeof(btnFailureColor)=='extraMargin')
219        extraMargin = false;
220
221    var html = '<div class="modal-dialog modal-dialog-centered" role="document">' + 
222            '<div class="modal-content">' + 
223                '<div class="modal-header">' +
224                    '<h5 class="modal-title">' + titre + '</h5>' + 
225                    '<button type="button" class="btn-close" aria-label="Close" data-bs-dismiss="modal"></button>' + 
226                '</div>' + 
227                '<div class="modal-body">' + contenu.replace(regex,"<br>") + '</div>' + 
228                '<div class="modal-footer">' +
229                    (extraMargin ? 
230                        '<div class="container-fluid p-0">' + 
231                            '<div class="row">' + 
232                                '<div class="col"><button rel="failure" type="button" class="btn ' + btnFailureColor + ' btn-sm"' + dismiss_failure + '>' + btnFailure + '</button></div>' +
233                                '<div class="col text-end"><button rel="success" type="button" class="btn ' + btnSuccessColor + ' btn-sm"' + dismiss_success + '>' + btnSuccess + '</button></div>' +
234                            '</div>' +
235                        '</div>'
236                        :
237                        '<button rel="failure" type="button" class="btn ' + btnFailureColor + ' btn-sm"' + dismiss_failure + '>' + btnFailure + '</button>' + 
238                        '<button rel="success" type="button" class="btn ' + btnSuccessColor + ' btn-sm"' + dismiss_success + '>' + btnSuccess + '</button>'
239                    ) +
240                '</div>' +
241            '</div>' +
242        '</div>';
243
244    set_content_confirm_and_open( titre, html );
245
246    if(typeof(callbackSuccessFunction)=='function')
247        $('#confirmPop .modal-footer .btn[rel=success]').bind('click', callbackSuccessFunction );
248
249    if(typeof(callbackCloseFunction)=='function')
250        $('#confirmPop .modal-footer .btn[rel=failure]').bind('click', callbackCloseFunction );
251}
252    
253function showInformationMessageWithCallback(titre, contenu, callbackCloseFunction, btnSuccess)
254{
255	const regex = /\n/g;
256
257    if(typeof(btnSuccess)=='undefined')
258		btnSuccess = 'Ok'
259
260	if(typeof(titre)=='undefined')
261		titre = 'Demande de confirmation'
262
263	if(typeof(callbackCloseFunction)=='undefined')
264		callbackCloseFunction = closeConfirmMessage;
265
266    var html = '<div class="modal-dialog modal-dialog-centered" role="document">' + 
267            '<div class="modal-content">' + 
268                '<div class="modal-header">' +
269                    '<h5 class="modal-title">' + titre + '</h5>' + 
270                    '<button type="button" class="btn-close" aria-label="Close"></button>' + 
271                '</div>' + 
272                '<div class="modal-body">' + contenu.replace(regex,"<br>") + '</div>' + 
273                '<div class="modal-footer">' +
274                    '<button type="button" class="btn btn-success btn-sm">' + btnSuccess + '</button>' + 
275                '</div>' +
276            '</div>' +
277        '</div>';
278
279    set_content_confirm_and_open( titre, html );
280
281    $('#confirmPop .modal-header button.close, #confirmPop .modal-footer .btn-success').bind('click', callbackCloseFunction );
282}
283
284function set_content_confirm_and_open( titre, html )
285{
286    $('#confirmPop').html( html );
287
288    add_nested_modal( 'confirmPop' );
289}
290
291function setModalZindex( z )
292{
293    $('#confirmPop .modal').css('z-index', z );
294    $('.modal-backdrop').css('z-index', z-1 );
295}
296
297function closeConfirmMessage()
298{
299    $('.modal-backdrop').css('z-index', 1040).hide();
300    
301}
302
303function closeConfirmMessage_and_then( fn )
304{
305    $('#confirmPop .modal').off('hidden.bs.modal');
306    $('#confirmPop .modal').on('hidden.bs.modal', function(){ $('#confirmPop').html(""); fn() });
307
308    remove_nested_modal( 'confirmPop' );
309}