Подтвердить что ты не робот

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

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

4b9b3361

ОТВЕТЫ

Ответ 1

Обновление по версии Bootstrap v3.2.5

Благодаря @Gruber для подтверждения по версии 3.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, которые вам нужно будет немного изменить, поясняется ниже). Перейдите к нижней части этой страницы и выберите скомпилировать и загрузить, чтобы захватить ваш пакет.

Последнее замечание. Как упоминал @Rrrrrrrrrk, "я обнаружил, что он все еще добавляет много нормализации к началу 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/. Сохраняет несколько KB.

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

Я мог бы просто закончить это. Я использую плагин 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 -->

Наконец, вы захотите добавить этот script после плагинов выше. Это немного приспособлено к моей ситуации, я только запускаю модальный, если нет набора файлов 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>

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

Ответ 2

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

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

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

Ответ 3

Здесь вы используете загрузку 3:

JSnippet DEMO и исходный код

Исходный код в 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>