css - formulario - que es una ventana modal

Usando*solo*Bootstrap modal

Question

Estoy integrando mi Modal de Bootstrap con otro sitio que no lo usa. Veo que el bootstrap te permite separar el Javascript para cada componente. Pero, ¿qué pasa con el CSS? Si hago un enlace a bootstrap.css, todo el sitio cambiará. Solo quiero suficiente CSS para que el Modal funcione. (Intenté ir a través del archivo CSS y solo adivinar lo que necesitaba, pero no funcionó).

Answer 1

Aquí vas usando bootstrap 3:

JSnippet DEMO y código fuente

Código fuente en un github gist

Después de incluir el CSS, JS el uso es exactamente el mismo:

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

Answer 2

Vaya a la twitter.github.io/bootstrap/customize.html y seleccione solo la opción modal en la sección de componentes. Descargue el archivo, abra el archivo bootstrap.css y copie todo el contenido en su propio archivo CSS.

Si intenta averiguar qué partes específicas necesita, probablemente se perderá algo importante, y además, el CSS modal por sí solo no es demasiado grande.

Actualización : el enlace ahora está here . Descubrí que aún agregaba mucha normalización al inicio de la CSS, pero podía eliminarla de manera segura (de html a img, manteniendo la CSS desde .img-responsive en adelante).

Answer 3

Actualización a partir de Bootstrap v3.2.5

Gracias a @Gruber por la confirmación a partir de v3.2.5.

El enlace todavía está here , para personalizar la configuración como se menciona en @Fisu.

Sin embargo, debe seleccionar 4 opciones, no solo modal como se indica. Comience haciendo clic en Alternar todo para apagar todo, luego seleccione estas 4 opciones;

• Buttons bajo CSS común
• Close icon en Componentes
• Component animations (for JS) bajo componentes de JavaScript
• Modals bajo componentes de JavaScript

Esto debería traer todo el CSS sobre lo que necesitarás. A continuación está la sección de complementos de jQuery, nuevamente comienza seleccionando Alternar todo para desactivar todo y luego solo selecciona dos complementos:

• Modals en Linked to components
• Transitions bajo magia (requerido para cualquier tipo de animaciones)

Eso es todo lo que necesitará, js ( bootstrap.min.js ) y css (solo bootstrap.css que deberá modificar un poco, como se explica a continuación). Vaya a la parte inferior de esa página y seleccione compilar y descargar para tomar su paquete.

Una última cosa para notar. Como @Rrrrrrrrrk mencionó, "encontré que todavía agregaba mucha normalización al comienzo de la CSS, pero podía eliminarla de manera segura (de html a img, manteniendo la CSS desde .img-responsive en adelante)". Esto sigue siendo válido También agregué el siguiente CSS para forzar algunos estilos en los 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;}

Esto solo garantiza que las fuentes sean similares al estilo modal original y no adopten los estilos de sus páginas (probablemente podría modificarse un poco más). Un último elemento a tener en cuenta, puede minificar el CSS en este punto ejecutando a través de http://cssminifier.com/ . Ahorra unos pocos KB.

Implementando el Modal:

Bien podría terminar esto. Estoy usando un plugin de cookies porque quiero darles a mis usuarios una opción para ocultar el mensaje durante 14 días, que está establecido en el código. Estos son los bloques de código que necesitará:

Esto debería ir en el <head> de su documento, probablemente después de cualquiera de sus CSS, por lo que incluso antes de que termine la etiqueta </head> final.

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

Esto debería ir dentro de tu <body> . Esto creará el modal y el css que has incluido lo ocultará.

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

Este código debe ir justo antes de la etiqueta de finalización </body> . Carga jQuery, bootstrap y el complemento de cookies que necesito.

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

Finalmente, deseará agregar esta secuencia de comandos después de los complementos anteriores. Esto es un poco personalizado para mi situación, solo estoy lanzando el modal si no hay un conjunto de cookies, y si los lanzamientos modales crearon una función para hacer clic en No volver a mostrar, que crea la cookie para desactivar el lanzamiento del 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>

¡Espero que esto ayude! Buena suerte.