Creare un popup prima di disconnettersi (logout)


Tutorial Creare un popup prima di disconnettersi (logout)

Messaggio Da Niko Dom 17 Gen 2021 - 15:55

Creare un popup prima di disconnettersi (logout)


Con questo tutorial, quando fai clic sul pulsante per disconnetterti, verrà visualizzato un popover per chiederti se veramente vuoi disconnetterti dal forum!

Creare un popup prima di disconnettersi (logout) Cwev1n9

Installazione del codice Javascript

Le pagine javascript attive nel tuo forum permettono di inserire script e jQuery per personalizzare il tuo forum, tuttavia è importante sapere che qualsiasi script trovato su internet non finisce per apparire nei forum.

Non dobbiamo fare altro che andare verso Pannello di amministrazione ► Moduli ► HTML & Javascript ► Gestione del codice javascript e creare un nuovo codice con queste impostazioni:
  • Titolo: a tua scelta
  • Dove: in tutte le pagine
  • Codice:
    Codice:
    /**
     *  SweetAlert - Logout by Pedxz
     *  Created June 29, 2018 <UP_09.05.2020>
     *  Translated Niko
    */
    (function($) {
        'use strict';
     
        var config = {
            url: 'https://cdnjs.cloudflare.com/ajax/libs/limonte-sweetalert2/8.11.8/sweetalert2.all.min.js',
            lang: {
                title: 'Sei sicuro di volerti disconnettere?',
                text: 'Stai per fare il logout dal forum?',
                logout: 'Logout'
            },
            $class: [
                'a[href^="/login?logout=1"]',
                '#fa_toolbar a[style*="pointer"]',
                'a[id="logout"]',
                'a[href*="logout"]'
            ]
        };
     
        $(function() {
     
            if (!_userdata.session_logged_in && $('a[id="logout"]')) return;
     
            $.getScript(config.url, function() {
                $(config.$class.join(',')).on('click', function(event) {
     
                    event.preventDefault();
                    event.stopPropagation();
     
                    Swal.fire({
                        title: config.lang.title,
                        text: config.lang.text,
                        type: 'info',
                        showCancelButton: true,
                        confirmButtonColor: '#3085d6',
                        cancelButtonColor: '#d33',
                        confirmButtonText: config.lang.logout
                    }).then((result) arrow {
                        if (result.value) {
                            window.location.href = (_board.tpl_version == "awesomebb" ? _userdata.page_logout : $('a[id="logout"]').attr('href'));
                        }
                    });
     
                });
            });
     
        });
     
    }(jQuery));


Personalizzazione

Sarà poi possibile personalizzare il testo: può essere fatto semplicemente modificando la prima parte del codice:
Codice:
lang: {
            title: 'Sei sicuro di volerti disconnettere?',
            text: 'Stai per fare il logout dal forum?',
            logout: 'Logout'
        },

Inoltre, è possibile modificare alcuni aspetti grafici direttamente dal codice javascript. Per gli altri invece potrete comunque agire sul foglio di stile CSS :bene:
Codice:
confirmButtonColor: '#3085d6',
                    cancelButtonColor: '#d33',
confirmButtonColor definisce il colore del bottone di conferma (Logout)
cancelButtonColor definisce il colore del bottone di annullamento (Annulla)


Niko
Niko
Moderatore
Moderatore

Sesso : Maschio
Età : 25
Messaggi : 8698
Località : Provincia di Varese

Visualizza il profilo https://www.openstudio.one
Niko è stato ringraziato dall'autore di questo topic.

Visualizza l'argomento precedente Visualizza l'argomento successivo Torna in alto


 
Permessi in questa sezione del forum:
Non puoi rispondere agli argomenti in questo forum.