web-dev-qa-db-fra.com

Utiliser * just * Bootstrap modal

J'intègre mon Modal de Bootstrap à un autre site qui ne l'utilise pas. Je vois que bootstrap vous permet de séparer le code Javascript de chaque composant. Mais Si je crée un lien vers bootstrap.css, tout le site changera. Je veux juste assez de CSS pour que Modal fonctionne (j'ai essayé de parcourir le fichier CSS et de deviner ce dont j'avais besoin, mais cela n'a pas fonctionné ).

csstwitter-bootstrapbootstrap-modal
51
mdundas

Mise à jour le Bootstrap v3.2.5

Merci à @Gruber pour la confirmation de la v3.2.5.

Le lien est toujours ici, pour personnaliser la configuration comme indiqué par @Fisu.

Vous devez cependant sélectionner 4 options, pas seulement modal comme indiqué. Commencez par cliquer sur Basculer tout pour tout désactiver, puis sélectionnez ces 4 options;

  • Buttons sous CSS commun
  • Close icon Sous Composants
  • Component animations (for JS) sous composants JavaScript
  • Modals sous composants JavaScript

Cela devrait apporter tout le CSS sur ce dont vous aurez besoin. Vient ensuite la section des plugins jQuery, recommencez en sélectionnant Basculer tout pour tout désactiver, puis en sélectionnant simplement deux plugins:

  • Modals sous lié à des composants
  • Transitions sous Magic (obligatoire pour tout type d'animation)

C'est tout ce dont vous aurez besoin, js (bootstrap.min.js) Et css (seulement bootstrap.css Que vous devrez modifier un peu, comme expliqué ci-dessous). Allez au bas de cette page et sélectionnez , compilez et téléchargez pour récupérer votre paquet.

Une dernière chose à noter. Comme @Rrrrrrrrrrk l'a mentionné, "J'ai trouvé qu'il restait encore beaucoup de normalisation au début du fichier css, mais je pouvais le supprimer en toute sécurité (de html à img, en le gardant à partir de .img-responsive)." Ceci est toujours valide. J'ai aussi ajouté le CSS suivant pour forcer quelques styles dans les Modals:

.modal { font-family:Arial,Helvetica,sans-serif!important}
.modal p {font-family:"Helvetica Neue",Helvetica,Arial,sans-serif !important; color:#000 !important; font-size:14px;}

Cela garantit simplement que les polices sont similaires au style modal d'origine et ne prennent pas le style de vos pages (elles pourraient probablement être légèrement modifiées). Un dernier élément à noter, vous pouvez minifier le fichier css à ce stade en le faisant passer par http://cssminifier.com/ . Enregistre quelques KB.

Implémentation du modal:

Je pourrais aussi bien finir ça. J'utilise un plugin cookie parce que je veux donner à mes utilisateurs une option pour cacher le message pendant 14 jours, ce qui est défini dans le code. Voici les blocs de code dont vous aurez besoin:

Cela devrait aller dans le <head> de votre document, probablement après l’un de vos css, donc même juste avant la fin </head> tag fonctionnera.

<!-- CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    <!-- Latest compiled and minified CSS -->
    <link rel="stylesheet" href="modalsonly/css/bootstrap-3.2.0.min.css">

<!-- END CSS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

Cela devrait aller dans votre <body>. Cela créera le modal et les css que vous avez inclus le cacheront.

<!-- HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    <div class="modal fade " id="important-msg" tabindex="-1" role="dialog" aria-labelledby="important-msg-label" aria-hidden="true">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
            <h4 class="modal-title" id="important-msg-label">Message Title!</h4>
          </div>
          <div class="modal-body">
            <p>Message text</p>
          </div>
          <div class="modal-footer">
            <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            <button type="button" class="btn btn-primary" id="dont-show-again">Don't Show Again</button>
          </div>
        </div>
      </div>
    </div>

<!-- END HTML NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

Ce code devrait aller juste avant la balise de fin </body>. Il charge jQuery, bootstrap et le plugin cookie dont j'ai besoin.

<!-- PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

    <!-- Latest jQuery (1.11.1) -->
    <script src="modalsonly/js/jquery-1.11.1.min.js"></script>

    <!-- Latest compiled and minified JavaScript -->
    <script src="modalsonly/js/bootstrap-3.2.0.min.js"></script>    

    <!-- jQuery Cookie -->
    <script src="modalsonly/js/jquery.cookie-1.4.1.min.js"></script>

<!-- END PLUGINS NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP -->

Enfin, vous voudrez ajouter ce script après les plugins ci-dessus. Ceci est un peu personnalisé selon ma situation, je ne lance le modal que s'il n'y a pas de cookie défini et si les lancements de modal créent une fonction permettant de cliquer sur Ne plus afficher ce qui crée le cookie pour désactiver le lancement du modal.

<script>
    //Start the DOM ready
    $( document ).ready(function() {


        //CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP

            //Check to see if the cookie exists for the Don't show again option
            if (!$.cookie('focusmsg')) {
                //Launch the modal when you first visit the site            
                $('#important-msg').modal('show');
            }

            //Don't show again mouse click
            $("#dont-show-again").click( function() {

                //Create a cookie that lasts 14 days
                $.cookie('focusmsg', '1', { expires: 14 });     
                $('#important-msg').modal('hide');      

            }); //end the click function for don't show again

        //END CODE NEEDED FOR THE IMPORTANT MESSAGE MODAL POPUP


    }); //End the DOM ready
</script>

J'espère que cela t'aides! Bonne chance.

95
Tony M

Ici, vous utilisez bootstrap 3:

JSnippet DEMO et code source

Code source dans un github Gist

Après avoir inclus le CSS, JS utilise exactement la même chose:

<!-- Button HTML (to Trigger Modal) -->
<a href="#myModal" class="btn btn-lg btn-primary" data-toggle="modal">Launch Demo Modal</a>

<!-- Modal HTML -->
<div id="myModal" class="modal fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">Confirmation</h4>
            </div>
            <div class="modal-body">
                <p>Do you want to save changes you made to document before closing?</p>
                <p class="text-warning"><small>If you don't save, your changes will be lost.</small></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Save changes</button>
            </div>
        </div>
    </div>
</div>
8
Shlomi Hassid