web-dev-qa-db-fra.com

Boîte de dialogue Bootbox Modal Bootstrap 4

Sur ma page, j'ai une table. Dans l'une des cellules de cette table se trouve un lien. J'exécute des scripts jQuery si ce lien est cliqué. Par exemple, si le lien est cliqué, je souhaite afficher une boîte de dialogue Bootstrap. Cela peut être fait facilement avec Bootbox.js . Cependant, bootbox n'est pas mis à jour avec la prise en charge de Bootstrap 4.

À l'origine, la boîte de démarrage ne s'afficherait même pas car dans Bootstrap 3, le nom de la classe à afficher était in, mais dans Bootstrap 4, il s'agit de show. J'ai corrigé cela, mais voici à quoi cela ressemble actuellement.

 enter image description here

Le code HTML généré en appelant bootbox.js est le suivant:

<div tabindex="-1" class="bootbox modal fade show in" role="dialog" style="display: block;">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button class="bootbox-close-button close" aria-hidden="true" type="button" data-dismiss="modal">×</button>
                <h4 class="modal-title">Test Title?</h4>
            </div>
            <div class="modal-body">
                <div class="bootbox-body">Test Message</div>
            </div>
            <div class="modal-footer">
                <button class="btn btn-default" type="button" data-bb-handler="cancel"><i class="fa fa-times"></i> Cancel</button>
                <button class="btn btn-primary" type="button" data-bb-handler="confirm"><i class="fa fa-check"></i> Confirm</button>
            </div>
        </div>
    </div>
</div>

Le problème est que dans la div où la classe est modal-header, le bouton vient avant l'élément h4. Si ceux-ci étaient inversés, le problème serait résolu, mais c'est pour cela que j'ai besoin d'aide. Comment ferais-je cela via la syntaxe bootbox? Je sais que je pourrais simplement supprimer le titre pour l'instant jusqu'à ce que bootbox soit mis à jour pour prendre en charge Bootstrap 4, mais je suis curieux de savoir si cela peut être fait.

Voici ce que j'ai jusqu'à présent:

                bootbox.confirm({
                    className: "show", // where I had to manually add the class name
                    title: "Test Title?",
                    message: "Test Message",
                    buttons: {
                        cancel: {
                            label: "<i class='fa fa-times'></i> Cancel"
                        },
                        confirm: {
                            label: "<i class='fa fa-check'></i> Confirm"
                        }
                    },
                    callback: function (result) {
                        // my callback function
                    }
                });
javascriptjqueryhtmlcssbootstrap-4
12
M12 Bennett

Vous pouvez simplement le résoudre par css:

.bootbox .modal-header{
display: block;
}
21
Paweł Rymsza

il peut être corrigé avec:

.bootbox .modal-header {
    flex-direction: row-reverse;
}
3
auri.borealis

Si les gens tombent sur ceci, il existe maintenant une version de bootbox 5 qui supporte bootstrap 4. Vous pouvez la trouver ici https://www.nuget.org/packages/Bootbox.JS/5.0.0-beta

1
Al Belmondo

Peut-être que vous pouvez réorganiser le dom dans la fonction de rappel de la boîte de démarrage, comme suit:

bootbox.confirm({
    ...
    callback: function () {
       $('.modal-header').prepend('.modal-title');                 
    }
});
0
Eliellel

voici ce que j'ai fait et cela a fonctionné:

var m=b(n.closeButton);a.title?d.find(".modal-header").prepend(m)

et le changer pour:

var m=b(n.closeButton);a.title?d.find(".modal-header").append(m)

Il suffit donc de le changer pour "ajouter" et le bouton de fermeture devrait normalement se trouver du côté droit. 

0
Youssef Harkati