Pytanie bootstrap, modalne dialogi, pokazane .bs.modalne wydarzenie nie uruchamia się


Używam modalnego okna dialogowego ze zdalną opcją:

<a target="profile-banner" data-target="#edit-slide-dlg" href="/Banner/SlideEditModal/1/1"
data-toggle="modal" class="banner-slide-control">Edit</a>

Gdzie:

<div id="edit-slide-dlg" class="modal fade" tabindex="-1"></div>

Ponadto, słucham zdarzenia show.bs.modal, w którym używam właściwości event.target:

$("body").on("shown.bs.modal", function (event) {
  // do something with event.target 
}

Niektóre powody, dla których to zdarzenie nie zostało wywołane, gdy po raz pierwszy otworzę okno dialogowe. Zostaje wyrzucony tylko po raz drugi. Próbowałem przeglądać skrypty bootstrap i znalazłem ten kod (zobacz mój komentarz):

var e = $.Event('shown.bs.modal', { relatedTarget: _relatedTarget })
transition ?
that.$element.find('.modal-dialog') // wait for modal to slide in
   .one($.support.transition.end, function () {
      that.$element.focus().trigger(e) //THIS LINE NEVER EXECUTED AT FIRST DIALOG OPENING
   })
   .emulateTransitionEnd(300) :
that.$element.focus().trigger(e)

Więc wyłączyłem przejście jako obejście, spowodowało, że zdarzenie zostanie uruchomione po raz pierwszy, ale event.target jest pustym ciągiem. Po raz drugi event.target zawiera odpowiedni dialog HTML. Czy jest to problem z moim kodem lub bootstrapem?


12
2017-12-02 23:27


pochodzenie


Głosowanie, aby zamknąć: Bootstrap zmienił wiele rzeczy między wersjami 2 i 3. Proszę przeczytać Migracja z wersji 2.x do wersji 3.0 a także nowa dokumentacja dla Modals - Phil
Moje pytanie dotyczy wersji 3 (właściwie nigdy nie używałem wersji 2). Znowu to opóźnienie dzieje się tylko wtedy, gdy używana jest opcja zdalna. Chyba jest jakiś problem z czasem. Spróbuję wprowadzić modalne dialogi przez JavaScript zamiast Atrybuty. Może sam załaduję zawartość okna dialogowego modalnego. Nie dajcie się już zrezygnować z modów bootstrapu :). - Tenek
Używasz znaczników v2. Gdzie jest twój modal-diag klasa? - Phil
Miałeś na myśli klasę "modalnego dialogu"? Treść okna dialogowego modalnego (w tym DIV z klasą "dialog modalny") jest ładowana z określonego adresu URL: href = "/ Banner / SlideEditModal / 1/1" (zobacz mój oryginalny przykład). Mogę pobrać nieco później HTML ... Nie jestem pewien, gdzie użyłem znaczników v2. Jeśli uważasz, że to może być problem, daj mi znać, a spróbuję zmienić miejsce problemu. - Tenek
Ups, tak modal-dialog. Twoje pytanie jest niekompletne (nie spełnia SSCCE wytyczne). Sugerowałbym usunięcie data-toggle wyzwalać atrybuty i zamiast tego używać JS do otwierania modala tylko wtedy, gdy zawartość jest obecna - Phil


Odpowiedzi:


Miałem dokładnie ten sam problem. Mogę to naprawić rozwiązaniem tego problemu StackOverflow: Bootstrap modalny "załadowany" zdarzenie na zdalnym fragmencie

Zasadniczo musisz ręcznie otworzyć modal i zaimplementować ładowanie Ajax samemu. Coś jak:

$modal.modal({
    'show': true
}).load('/Banner/SlideEditModal/1/1', function (e) {
    // this is executed when the content has loaded.
});

5
2018-01-16 15:45



a co z wydarzeniem, które się odpala, gdy ten modał się zamyka? - Clayton
Jeśli chodzi o wydarzenie, szukaj tutaj lepszej odpowiedzi: stackoverflow.com/questions/19279629/... - Karussell
Cześć, Anton. Wierzę, że ta odpowiedź pomoże mi rozwiązać mój problem: stackoverflow.com/questions/47609994/... Mam wątpliwości co do tego, jak dinamicznie wysłać href do jQuery: load ('/ Banner / SlideEditModal / 1/1' Ponieważ jest kilka przycisków wywołujących modal w moim widoku.) Zbadam, ale chciałem ci podziękować za tę wskazówkę. - Luis Alberto Delgado de la Flo