Ich integriere mein Modal von Bootstrap mit einer anderen Website, die es nicht verwendet. Ich sehe, dass Bootstrap können Sie das Javascript für jede Komponente trennen. Aber was ist mit der CSS? Wenn ich auf bootstrap.css verlinke, ändert sich die gesamte Site. Ich möchte nur genug CSS, damit das Modal funktioniert. (Ich habe versucht, durch die CSS-Datei gehen und nur raten, was ich brauchte, aber es hat nicht funktioniert).Mit * nur * Bootstrap modal
Ergänzung vom Bootstrap v3.2.5
Danke für die Bestätigung, von v3.2.5 auf @Gruber.
Der Link ist immer noch here, um das Setup wie von @ Fisu erwähnt anzupassen.
Sie müssen jedoch 4 Optionen auswählen, nicht nur modal wie angegeben. Klicken Sie auf Alle umschalten, um alles auszuschalten, und wählen Sie dann diese 4 Optionen aus.
Buttons unter Gemeinsam CSSClose icon unter KomponentenComponent animations (for JS) unter JavaScript-KomponentenModals unter JavaScript-KomponentenDies sollte alle CSS, die Sie benötigen, bringen. Als nächstes wird der Abschnitt jQuery Plugins ist, wieder durch die Auswahl Toggle All zu starten, alles auszuschalten und wählen Sie dann nur zwei Plugins:
Modals unter an Komponenten verlinkteTransitions unter Magie (für jede Art erforderlich von Animationen ) das ist alles Sie ein wenig ändern werden müssen, erläutert benötigen, js (bootstrap.min.js) und CSS (nur bootstrap.css, die Ihnen). Gehen Sie zum Ende dieser Seite und wählen Sie kompilieren und herunterladen, um Ihr Paket zu greifen.
Eine letzte Sache zu beachten.Wie @Rrrrrrrrk erwähnt, "Ich fand, dass es noch eine Menge Normalisierung zu Beginn der CSS hinzugefügt, aber könnte es sicher löschen (von HTML zu IMG, halten die CSS von. IMG-responsive ab)."Dies ist immer noch gültig. ich auch die folgenden CSS noch ein paar Arten in die Modals zu zwingen:
.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;}
Dies stellt sicher, nur Schriftarten zum ursprünglichen modal Styling ähnlich sind und nehmen Sie nicht auf Ihren Seiten Stile (könnte wahrscheinlich ein bisschen gezwickt werden Mehr). Ein letzter zu beachtender Punkt, Sie könnten das CSS an dieser Stelle minimieren, indem Sie es durch http://cssminifier.com/ führen. Speichert ein paar KB.
die Modal Implementierung:
Ich könnte genauso gut beenden gerade dies ab. Ich verwende ein Cookie-Plugin, weil ich meinen Benutzern eine Option zum Ausblenden der Nachricht für 14 Tage geben möchte, die im Code festgelegt ist. Hier sind die Codeblöcke benötigen Sie:
Dieses im <head> von Ihnen Dokument gehen sollte, wahrscheinlich nach einer Ihrer css, so auch kurz vor der Endung </head> Tag arbeiten.
<!-- 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 -->
Dies sollte <body> in Ihrem gehen. Dadurch wird das Modal erstellt und das CSS, das Sie eingefügt haben, wird es verbergen.
<!-- 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">×</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 -->
soll Dieser Code geht kurz vor dem </body> Tag endet. Es lädt jQuery, Bootstrap und das Cookie-Plugin, das ich brauche.
<!-- 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 -->
Schließlich möchten Sie dieses Skript nach den oben genannten Plugins hinzufügen. Dies ist ein bisschen angepasst an meine Situation, ich starte das Modal nur, wenn kein Cookie gesetzt ist, und wenn die Modalstarts eine Funktion zum Klicken auf Nicht anzeigen erzeugt haben, die den Cookie erzeugt, um den Start des Modals zu deaktivieren.
<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>
Hoffe, das hilft! Viel Glück.
Alter. Tolle Antwort. – Haymaker87
Danke Mann, froh, dass es geholfen hat! Wenn jemand liest, dass die Antwort veraltet ist, lass es mich wissen und ich werde es aktualisieren. –
Kann sagen, dass ab Bootstrap 3.3.5 Version dies noch gültig ist und perfekt funktioniert. Denken Sie auch daran, die [transitions.js] (http://getbootstrap.com/javascript/#transitions) in die jQuery-Plugin-Zusammenstellung (unter ** Magic **) einzufügen, damit die Animationseffekte wirksam werden. – Gruber
Gehen Sie zu Bootstrap customize section und wählen Sie nur die modale Option im Komponentenbereich. Laden Sie die Datei herunter, öffnen Sie die Datei bootstrap.css und kopieren Sie den gesamten Inhalt in Ihre eigene CSS-Datei.
Wenn Sie versuchen, herauszufinden, welche spezifischen Teile Sie benötigen, werden Sie wahrscheinlich etwas Wichtiges verpassen, und außerdem ist das modale CSS selbst nicht zu groß.
Aktualisieren: Der Link ist jetzt here. Ich fand, dass es noch eine Menge Normalisierung zum Anfang des css hinzugefügt hat, aber könnte es sicher löschen (von HTML zu img, wobei die css von .img-responsive beibehalten wird).
Das hat fast für mich funktioniert. Außer ich habe eine benutzerdefinierte Breite für die .modal-dialog Klasse festgelegt. Bei Verwendung des vollständigen Bootstrap funktionierte es korrekt, aber mit den modal-angepassten Dateien ist die Hälfte des Dialogs immer noch die Standardgröße. – xr280xr
Ich habe es erneut versucht und es hat funktioniert. Ich weiß nicht, was sich geändert hat. – xr280xr
Der Link ist jetzt [hier] (http://getbootstrap.com/customize/). Ich fand, dass es noch eine Menge Normalisierung zum Anfang des css hinzugefügt hat, aber könnte es sicher löschen (von HTML zu img, wobei die css von .img-responsive beibehalten wird). –
Hier können Sie gehen mit Bootstrap 3:
Nach dem CSS einschließlich JS die Nutzung ist genau das gleiche:
<!-- 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">×</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>
genau das, was ich gesucht habe! – Dinesh
Wenn ich recht Bootstrap Anwendungen merken 'weniger' für das Stylesheet zur Erstellung. Also sollte es einfach sein, alle Regeln mit einem z. '.my-project' Klasse, die Sie Ihrem umgebenden Container hinzufügen. Oder Sie verwenden 'iframe' Sandboxing, wenn dies eine Option ist, mit der Einschränkung, dass der Bereich, in dem Ihre Elemente sichtbar sind, auf die Dimension des 'iframe' beschränkt ist. –
Ich konnte es von hier aus zum Laufen bringen. Sie müssen die Modal JS Component UND das Modal JQuery Plugin auswählen. http://twitter.github.io/bootstrap/customize.html – mdundas
thx T. Ich mag deine Idee über iFrame Sandboxing ...werde dies tun, wenn ich auf andere Probleme stoßen ... – mdundas