Bootstrap modalne nie wyświetlając

Question

mam skopiowany i wklejony przykładowy kod z Twittera bootstrap stworzyć podstawowe okno modalne w mojej aplikacji Rails 3.2:

<!-- Modal --> 
<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
    <div class="modal-header"> 
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
    <h3 id="myModalLabel">Modal header</h3> 
    </div> 
    <div class="modal-body"> 
    <p>One fine body…</p> 
    </div> 
    <div class="modal-footer"> 
    <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    <button class="btn btn-primary">Save changes</button> 
    </div> 
</div> 

<a href= "#myModal" role="button" class="btn" data-toggle="modal">Launch demo modal</a> 

To nie działa. Nie dzieje się tak dlatego, że jQuery lub skrypty się nie ładują, ponieważ: a) nie musi ładować js, ponieważ używa kierowania na dane i b) sprawdziłem konsolę i wszystko działa idealnie.

Nie dlatego, że włączam zarówno boostrap.js, jak i bootstrap-modal.js ... Sprawdziłem, a nie jestem.

Brakuje mi. To powinno po prostu działać. Inne bootstrap js działa dobrze na stronie.

Jedyne, co mogę wymyślić to to, że ma coś wspólnego z definicją klas .hide i .fade - kiedy je wyjmę, modal pokazuje się dobrze. Kiedy je dołączę, w ogóle się nie pojawi.

Czy jQuery UI może się z tym wtrącać?

Proszę pytać mnie o dalszych informacji może trzeba mi pomóc ...

UPDATE:

Więc myślę, widzę problemu, ale nie wiem jak to naprawić. Kiedy sprawdzić konsolę, na samym szczycie widzę, że

element.style { 
display: none; 
} 

jest jakoś teraz częścią div, więc w konsoli wygląda to tak:

<div id="myModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display: none;" > 

Ale nie wiem dlaczego go dodaje lub skąd. Jak mogę to sprawdzić?

Dzięki

Answer 1

Śledziłem przyczynę.

Po to, aby nadać mu ogólną użyteczność dla każdego, kto przyjdzie na to pytanie. Jeśli nie możesz określić, co jest nie tak, spróbuj zrobić "szukaj wszystkiego" dla wszystkich klas "modalnego" "zanikania" "zanikania" i "ukrywania" w dowolnych arkuszach stylów w aplikacji.

Jeden przypadek "zanikania" został zdefiniowany w losowym pliku css, i to właśnie zatrzymywało wyświetlanie go jako nadpisującego bootstrap. Po usunięciu odwołania wszystko było w porządku.

Answer 2

Jeśli dokonałeś aktualizacji z Bootstrap 2.3.2 do Bootstrap 3, musisz usunąć klasę "ukryj" z dowolnego modalnego elementu div;

Answer 3

Miałem mój modalny < div> wewnątrz mojego < li> .... nie dobrze.

Poza działa dobrze :-)

<div class="modal fade" id="confirm-logout" tabindex="-1" role="dialog" aria-labelledby="logoutLabel" aria-hidden="true"> 
    <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" id="myModalLabel">....</h4> 
      </div> 

      <div class="modal-body"> 
       <p>....</p> 
      </div> 

      <div class="modal-footer"> 
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
       <a class="btn btn-danger btn-ok">OK</a> 
      </div> 
     </div> 
    </div> 
</div> 
<li> 
    ..... 
</li> 

Answer 4

Jeśli używasz kątowy i próbuje stworzyć dyrektywę, która ma niestandardową modalne w nim, modalna zasłona pokaże ale modalna sama nie będzie, chyba że ustawisz zamień: true na twojej dyrektywie.

dyrektywa Typescript:

export class myModalDirective implements ng.IDirective { 
    static Register =() => { 
     angular.module('app').directive('myModal',() => { return new myModalDirective() }); 
    } 
    templateUrl = 'mymodal.html'  
restrict = 'E'; 
    replace = true; 
    scope = { 
     show: '=' 
    } 
    link = (scope: any, element: ng.IAugmentedJQuery, attrs: ng.IAttributes, ctrl: any) => { 
     var vm = this; 
     scope.$watch(function() { return scope.show; }, function (vis) { 
      if (vis) { 
       $(element).modal('show'); 
      } else { 
       $(element).modal('hide'); 
      } 
     }); 

    } 
    constructor() { 
    } 
} 

Modal HTML

<div class="modal fade" data-keyboard="false" data-backdrop="static"> 
    <div class="modal-dialog"> 
     <div class="modal-content"> 
       <div class="modal-header"> 
        <h4 class="modal-title">Modal Title</h4> 
       </div> 
       <div class="modal-body"> 
       </div> 
     </div> 
    </div> 
</div> 

Answer 5

Właśnie natknąłem się na ten temat, i stwierdził, kolor niestandardowy tekst arkusza stylów CSS: #ffffff jest zanurzenie zawartość tekstową, bo wzór tła kolor jest taki sam! tj. .model-content {background-color: #ffffff;} Upewnij się, że zastąpiłeś go w niestandardowym arkuszu stylów, dodając następujący kod: .modal-content {color: # 646464! important;}
Może to pomaga.

Answer 6

Powinieneś zaimportować jquery i bootstrap.min.js.

Dodaj to do kątowego-cli:

"scripts": ["../node_modules/jquery/dist/jquery.min.js", 
     "../node_modules/bootstrap/dist/js/bootstrap.min.js"] 

upewnij się że masz swoje foldery.