Вопрос по twitter-bootstrap – Twitter Bootstrap: модальное всплывающее окно не исчезнет

2

У меня есть следующая разметка с помощью модального плагина Twitter начальной загрузки:

    <div class="tabbable">
        <ul class="nav nav-tabs">
            <li class="active"><a href="#tabPeople" data-toggle="tab">People</a></li>
            <li><a href="#tabRoles" data-toggle="tab">Roles</a></li>
        </ul>
        <div class="tab-content">
            <div class="tab-pane active fade in" id="tabPeople">
                <a data-toggle="modal" href="#modalEditPerson1">Name</a>
                <div class="modal hide fade in" id="modalEditPerson1">
                    <div class="modal-header">
                        <button class="close" data-dismiss="modal">
                            ×</button>
                        <h3>
                            Name</h3>
                    </div>
                    <div class="modal-body">
                        <p>
                            One fine body…</p>
                    </div>
                    <div class="modal-footer">
                        <a href="#" class="btn" data-dismiss="modal">Close</a> <a href="#" class="btn btn-primary">
                            Save changes</a>
                    </div>
                </div>                   
            </div>
            <div class="tab-pane fade" id="tabRoles">
                <p>
                    Role stuff here.</p>
            </div>
        </div>
    </div>

Это вызывает модальный режим, но не затухает, как в демоверсии на этой странице:http://twitter.github.com/bootstrap/javascript.html#modals

UPDATE Я понял, что проблема в том, что он вложен в .tabbable div, который также использует .fade Я обновил HTML выше.

Ваш Ответ

2   ответа
-2

этого прокомментируйте или удалите свойство display из класса modal-background в bootstrap.css, как я сделал ниже

.

modal-backdrop {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 1040;
  background-color: #000;
  /*display:none;*/

now write some jquery as i have mentioned below:

$("#Yourid").click(function() {

  $('.modal-backdrop fade in').attr("display", "block");
});

Я столкнулся с проблемой и не нашел решения, поэтому, используя мои знания, применил эту логику, и это решение сработало как очарование. Нет правила, гласящего, что вы не можете изменить загрузочный css, в основном люди модифицировали или перезаписать загрузочный css, используя пользовательский css ,
3. JavaScript не является необходимым. hofnarwillie
2. Не изменяйте исходные файлы начальной загрузки CSS. hofnarwillie
4. Решение вообще не касается вводного поста (не уверен, чего он должен достичь) hofnarwillie
1. Вы не должны размещать HTML-код вне тега body. hofnarwillie
11

<script src="assets/js/bootstrap-transition.js"></script>
<script src="assets/js/bootstrap-modal.js"></script>

переходы.js должны быть включены в первую очередь!

просто проверьте свой HTML, и он работает нормально. Вы уверены, что загрузили правильный файл bootstrap-transition.js?
Ты был прав. Я загрузил его с github, поэтому плагин не был включен, но теперь я включил его, и он все еще не исчезает. hofnarwillie
Я сейчас удалил соответствующий HTML, и он работает нормально. кажется, проблема, когда он вложен в элемент .tabbable, который также исчезает. Есть идеи как побороть? Пожалуйста, смотрите обновленный HTML выше hofnarwillie
На этой странице:twitter.github.com/bootstrap/download.html Я выбираю все плагины и затем нажимаю гигантскую синюю кнопку внизу. hofnarwillie
Просто комментарий, что если вы выборочно включаете различные компоненты CSS из начальной загрузки, у вас также должен быть стиль .fade в таблице стилей.

Похожие вопросы