Domanda Usando * solo * Bootstrap modale


Sto integrando il mio modal da Bootstrap con un altro sito che non lo usa. Vedo che il bootstrap ti consente di separare il Javascript per ciascun componente. Ma per quanto riguarda il CSS? Se collego a bootstrap.css l'intero sito cambierà. Voglio solo un numero sufficiente di CSS per il modale per funzionare. (Ho provato ad andare attraverso il file CSS e solo a indovinare quello di cui avevo bisogno, ma non ha funzionato).


44
2018-06-13 13:21


origine


risposte:


Aggiornamento da Bootstrap v3.2.5

Grazie a @Gruber per la conferma dalla v3.2.5.

Il collegamento è ancora Qui, per personalizzare l'installazione come menzionato da @Fisu.

È necessario selezionare 4 opzioni, però, non solo modal come dichiarato. Inizia facendo clic su Attiva tutto per disattivare tutto, quindi seleziona queste 4 opzioni;

  • Buttons sotto CSS comune 
  • Close icon sotto componenti
  • Component animations (for JS) sotto Componenti JavaScript
  • Modals sotto Componenti JavaScript

Questo dovrebbe portare tutti i CSS su ciò di cui avrai bisogno. La prossima è la sezione plugin jQuery, di nuovo inizia selezionando Toggle tutto per disattivare tutto e quindi basta selezionare due plugin:

  • Modals sotto Collegato ai componenti
  • Transitions sotto Magia (richiesto per qualsiasi tipo di animazione)

Questo è tutto ciò di cui hai bisogno, js (bootstrap.min.js) e css (solo bootstrap.css che dovrai modificare un po ', spiegato di seguito). Vai in fondo a quella pagina e seleziona compilare e scaricare per prendere il tuo pacco.

Un'ultima cosa da notare. Come menzionato @Rrrrrrrrrrk, "Ho scoperto che aggiungeva ancora molta normalizzazione all'inizio del css, ma poteva tranquillamente cancellarlo (da html a img, mantenendo i css da .img-responsive in poi)."  Questo è ancora valido.  Ho anche aggiunto il seguente css per forzare alcuni stili nei 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;}

Ciò assicura solo che i caratteri siano simili allo stile modale originale e che non assumano gli stili delle pagine (potrebbe probabilmente essere ottimizzato un po 'di più). Un ultimo elemento da notare, è possibile ridimensionare il css a questo punto eseguendolo http://cssminifier.com/. Salva pochi KB.


Implementazione del modale:

Potrei anche finire questo. Sto usando un plugin per i cookie perché voglio offrire ai miei utenti un'opzione per nascondere il messaggio per 14 giorni, che è impostato nel codice. Ecco i blocchi di codice che ti serviranno:

Questo dovrebbe andare nel <head> di documento, probabilmente dopo uno qualsiasi dei tuoi css, quindi anche prima del finale </head> tag funzionerà.

<!-- 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 -->

Questo dovrebbe andare dentro il tuo <body>. Questo creerà il modale e il css che hai incluso lo nasconderà.

<!-- 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 -->

Questo codice dovrebbe andare appena prima della fine </body> etichetta. Carica jQuery, bootstrap e il plugin per cookie di cui ho bisogno.

<!-- 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 -->

Infine, ti consigliamo di aggiungere questo script dopo i plugin di cui sopra. Questo è un po 'personalizzato per la mia situazione, sto solo lanciando la modale se non ci sono cookie impostati, e se la modale lancia crea una funzione per fare clic su Non mostrare di nuovo che crea il cookie per disabilitare l'avvio della modale.

<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>

Spero che questo ti aiuti! In bocca al lupo.


85
2017-10-09 19:40



Vai al Bootstrap personalizza la sezionee seleziona solo l'opzione modale nella sezione componenti. Scarica il file, apri il bootstrap.css file e copia l'intero contenuto nel tuo file CSS.

Se cerchi di capire quali parti specifiche ti servono, probabilmente perderai qualcosa di importante, e inoltre, il css modale da solo non è troppo grande.

Aggiornare: Il link è ora Qui. Ho scoperto che aggiungeva ancora molta normalizzazione all'inizio del css, ma poteva tranquillamente cancellarlo (da html a img, mantenendo il css da .img-responsive in poi).


14
2018-06-13 13:37



Qui vai usando bootstrap 3:

DEMO JSnippet e codice sorgente

Codice sorgente in un github gist

Dopo aver incluso il CSS, JS l'utilizzo è esattamente lo stesso:

<!-- 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>

6
2018-05-27 20:05