Использование* just * Bootstrap modal

Я интегрирую свой модал из Bootstrap с другим сайтом, который его не использует. Я вижу, что bootstrap позволяет разделить Javascript для каждого компонента. Но как насчет CSS? Если я свяжусь с bootstrap.css весь сайт изменится. Мне просто нужно достаточно CSS для работы модала. (Я попытался пройти через CSS-файл и просто угадать, что мне нужно, но это не сработало).

3 44
css twitter-bootstrap bootstrap-modal

3 ответа:

Обновление от Bootstrap v3.2.5

Спасибо @Gruber за подтверждение от v3. 2. 5.

Связь все еще существуетздесь, чтобы настроить настройку, как указано в @Fisu.

Вам нужно выбрать 4 варианта, а не только modal, как указано. Начните с нажатия кнопки переключить все, чтобы отключить все, а затем выберите эти 4 опции;

  • Buttons под общим CSS
  • Close icon под компоненты
  • Component animations (for JS) в разделе компоненты JavaScript
  • Modals в разделе компоненты JavaScript

Это должно принести все CSS, которые вам понадобятся. Далее находится раздел плагинов jQuery, снова начните с выбора Toggle All, чтобы отключить все, а затем просто выберите два плагина:

  • Modals под связаны с компонентами
  • Transitions под магией (требуется для любого вида анимации)

Это все, что вам понадобится, js (bootstrap.min.js) и css (только bootstrap.css, которые вам нужно будет немного изменить, объяснено ниже). Перейдите к нижней части этой страницы и выберите compile и download , чтобы захватить ваш пакет.

Одна последняя вещь, чтобы отметить. Как упоминал @Rrrrrrrrk, " я обнаружил, что он все еще добавляет много нормализации к началу css, но может безопасно удалить его (из html в img, сохраняя css от .img-отзывчивый и далее)." это и есть продолжает действовать. я также добавил следующий css, чтобы заставить несколько стилей в Модалы: 

.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;}

Это просто гарантирует, что шрифты похожи на оригинальный модальный стиль и не принимают стили ваших страниц (возможно, их можно немного подправить). Один последний пункт, чтобы отметить, Вы можете минимизировать css на этом этапе, запустив его через http://cssminifier.com / . сохраняет несколько КБ.

Реализация модального:

Я мог бы просто закончить это. Я использую плагин cookie, потому что хочу дать своим пользователям возможность скрывать сообщение в течение 14 дней, что задано в коде. Вот кодовые блоки, которые вам понадобятся:

Это должно войти в <head> из вашего документа, вероятно, после любого вашего css, так что даже непосредственно перед концовкой </head> тег сработает.

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

Это должно идти в пределах вашего <body>. Это создаст модал, и css, который вы включили, скроет его.

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

Это код должен идти непосредственно перед концовкой </body> тег. Он загружает jQuery, bootstrap и нужный мне плагин cookie.

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

Наконец, вы захотите добавить этот скрипт после плагинов выше. Это немного адаптировано к моей ситуации, я запускаю модал только в том случае, если нет набора файлов cookie, и если модальные запуски создали функцию, чтобы нажать кнопку не показывать снова, которая создает файл cookie, чтобы отключить запуск модала.

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

Надеюсь, это поможет! Удачи.

85

Перейдите в разделBootstrap customize и выберите только модальный параметр в разделе components. Загрузите файл, откройте загрузчик .css файл и скопируйте все содержимое в свой собственный файл CSS.

Если вы попытаетесь определить, какие именно части вам нужны, вы, скорее всего, пропустите что-то важное, и, кроме того, модальный css сам по себе не слишком велик.

Обновление : Ссылка теперь здесь . Я обнаружил, что это все еще добавляло много нормализации к запуск css, но может безопасно удалить его (из html в img, сохраняя css от .img-отзывчивый и далее).

14

Здесь вы используете bootstrap 3:

JSNIPPET демо и исходный код

Исходный код в GitHub gist

После включения CSS, JS использование точно такое же: 

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