Jak otworzyć okno modalne Bootstrap za pomocą jQuery?

769

Używam modalnej funkcjonalności okna Bootstrap na Twitterze. Kiedy ktoś kliknie przycisk Prześlij w moim formularzu, chcę wyświetlić okno modalne po kliknięciu przycisku „Prześlij” w formularzu.

<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit"/>
</form>

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

jQuery:

$('#myform').on('submit', function(ev) {
    $('#my-modal').modal({
        show: 'false'
    }); 


    var data = $(this).serializeObject();
    json_data = JSON.stringify(data);
    $("#results").text(json_data); 
    $(".modal-body").text(json_data); 

    // $("#results").text(data);

    ev.preventDefault();
});
javascript jquery twitter-bootstrap użytkownik244394
źródło
Masz literówkę w opcji pokazu. Wymaga wartości logicznej, więc nie umieszczaj cudzysłowów wokół „false” - $ ('# my-modal'). Modal ({show: false});
Darren Parker,

Odpowiedzi:

1413

Bootstrap ma kilka funkcji, które można wywoływać ręcznie w modach:

$('#myModal').modal('toggle');
$('#myModal').modal('show');
$('#myModal').modal('hide');

Możesz zobaczyć więcej tutaj: składnik modalny Bootstrap

W szczególności sekcja metod .

Musisz więc zmienić:

$('#my-modal').modal({
    show: 'false'
});

do:

$('#myModal').modal('show');

Jeśli chcesz zrobić własne niestandardowe okienko, oto sugerowane wideo od innego członka społeczności:

https://www.youtube.com/watch?v=zK4nXa84Km4

Gonić
źródło
5
Nie jestem pewien, dlaczego to nie działa w moim przypadku. Mam taki sam kod demonstracyjny na swojej stronie i kodowałem przycisk wysyłania jak powyżej. Jednak po kliknięciu przycisku okno modalne szybko miga i zniknęło. Muszę kliknąć przycisk „Wstecz” przeglądarki, aby zwrócić stronę.
Chris22,
6
Tutaj znalazłem odpowiedź na mój komentarz powyżej. Duplikat linku do pliku bootrap.js na stronach witryny.
Chris22,
1
Uncaught TypeError: $ (...). Modal nie jest funkcją, to prawdopodobnie ja, ale jakieś pomysły, dlaczego otrzymuję ten błąd? (Mam jQuery)
Vladimir verleg
4
Znalazłem swój problem, wykonałem wywołanie ajax do pliku, który zawiera Jquery. Jeśli jQuery jest dołączony 2 razy, to nie działa!
Vladimir verleg
2
Próbowałem, .modal('show')ale w przeglądarce Google Chrome nie działa
Durga
89

Ponadto można użyć atrybutu danych

<button type="button" data-toggle="modal" data-target="#myModal">Launch modal</button>

W tym konkretnym przypadku nie musisz pisać javascript.

Możesz zobaczyć więcej tutaj: http://getbootstrap.com/2.3.2/javascript.html#modals

Gandarez
źródło
4
Aby wyjaśnić: „nie trzeba używać javascript” oznacza „nie trzeba pisać javascript”, javascript jest nadal używany. Próbowałem edytować odpowiedź, ale została odrzucona, ponieważ nie była „dokładniejsza”. Jeśli wypróbujesz powyższy kod przy wyłączonym javascript, nie zadziała. Oznacza to, że używasz dla mnie JavaScript.
npretto
83

Najczęściej, gdy $('#myModal').modal('show');nie działa, jest to spowodowane dwukrotnym dołączeniem jQuery. Dwukrotne włączenie jQuery powoduje, że modale nie działają.

Usuń jeden z linków, aby znów działał.

Ponadto niektóre wtyczki również powodują błędy, w tym przypadku dodaj 

jQuery.noConflict(); 
$('#myModal').modal('show');
Vladimir verleg
źródło
3
To spowodowało dla mnie DataTables z jego paczkowaną wersją jQuery
Wesley Smith,
2
Dziękuję Ci bardzo. Mam ten sam problem: modal nie jest funkcją. Ale po dodaniu jQuery.noConflict () działa.
Jobayer Ahmmed
1
Należy zauważyć, że to obejście należy stosować tylko wtedy, gdy nie można rozwiązać głównej przyczyny (tj. Tylko raz włączyć jQuery). Jeśli zawiera wtyczkę innej firmy, poszukaj wersji nieuwzględnionej lub skontaktuj się z inną firmą, aby ją utworzyć.
rybo111
19

Wystarczy wywołać metodę modalną (bez przekazywania jakichkolwiek parametrów) za pomocą jQueryselektora.

Oto przykład:

$('#modal').modal();
Żuraw
źródło
1
Jak przekazać więcej parametrów do mojego modalu? Na przykład konkretny (dynamiczny) identyfikator?
Pathros
1
Jak sprawić, by Twój identyfikator był dynamiczny? Czy robisz to przez ID? jeśli tak, możesz użyć funkcji $ (this) z jQuery do wybrania bieżącego obiektu i przekazania mu parametrów.
Brane
13

Jeśli użyjesz funkcji onclick links, aby wywołać modal przez jQuery, „href” nie może mieć wartości null.

Na przykład:

... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">

function openModal(){

    $('#myModal').modal();
}       
</script>

Modal nie może się pokazać. Właściwy kod to:

<a href="#" onclick="openModal()">Open a Modal by jQuery</a>
saneryee
źródło
12

Oto jak załadować alert ładowania początkowego, gdy tylko dokument będzie gotowy. To bardzo proste, wystarczy dodać

 $(document).ready(function(){
   $("#myModal").modal();
});

Zrobiłem demo na W3Schools.

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Bootstrap Example</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>

<div class="container">
  <h2>Here is how to load a bootstrap modal as soon as the document is ready </h2>
  <!-- Trigger the modal with a button -->


  <!-- Modal -->
  <div class="modal fade" id="myModal" role="dialog">
    <div class="modal-dialog">
    
      <!-- Modal content-->
      <div class="modal-content">
        <div class="modal-header">
          <button type="button" class="close" data-dismiss="modal">&times;</button>
          <h4 class="modal-title">Modal Header</h4>
        </div>
        <div class="modal-body">
          <p>Some text in the modal.</p>
        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        </div>
      </div>
      
    </div>
  </div>
  
</div>

<script>
$(document).ready(function(){
   $("#myModal").modal();
});
</script>

</body>
</html>
Rozwiń fragment kodu

csandreas1
źródło
10

Sprawdź kompletne rozwiązanie tutaj:

http://www.w3schools.com/bootstrap/tryit.asp?filename=trybs_ref_js_modal_show&stacked=h

Pamiętaj, aby umieścić biblioteki w wymaganej kolejności, aby uzyskać wynik:

1- Pierwszy bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js

(Innymi słowy, jquery.min.js musi zostać wywołany przed bootstrap.min.js)

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script> 

 <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
A.Aleem11
źródło
7

Wypróbowałem kilka metod, które zawiodły, ale poniższe działały dla mnie jak urok:

$('#myModal').appendTo("body").modal('show');
zwykły
źródło
2
Podobnie! To jest jedyne rozwiązanie, które również działało dla mnie.
pengz
Jesteś pewien, że nie chciał .appendTo("modal-body")?
James A Mohler,
@novembersky, musisz umieścić kod w zdarzeniu click lub podczas ładowania strony za pomocą jquery: $ (dokument) .ready (function () {$ ("# myModal"). modal ();});
Abhijit Kumar
7

Spróbuj użyć jQuery zamiast znaku $ podczas wywoływania funkcji, to zadziałało w moim przypadku, jak widać poniżej.

jQuery.noConflict(); 
jQuery('#myModal').modal('show');

jQuery.noConflict (); ponieważ kiedy jQuery ('# myModal'). modal ('show'); nie działa, jest to spowodowane dwukrotnym dołączeniem jQuery. Dwukrotne włączenie jQuery powoduje, że modale nie działają. i rozwiązałoby to problem w takim przypadku, jak w moim przypadku się powtarza.

Dalej możesz przejść do tego linku

Okno modelu ładowania początkowego nie wyświetla się przez wywołanie przez JQuery

IB
źródło
4

Próbować

$("#myModal").modal("toggle")

Aby otworzyć lub zamknąć modal za pomocą id myModal.

Jeśli powyższe nie działa, oznacza to, że bootstrap.js został zastąpiony przez inny plik js. Oto rozwiązanie

1: - Przenieś bootstrap.js na dół, aby zastąpił inne pliki js.

2: - Upewnij się, że kolejność jest taka jak poniżej

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>
Nikhil Mohadikar
źródło
4 
<form id="myform" class="form-wizard">
    <h2 class="form-wizard-heading">BootStap Wizard Form</h2>
    <input type="text" value=""/>
    <input type="submit" id="submitButton"/>
</form>

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

Możesz uruchomić modal za pomocą kodu poniżej.

$(document).ready(function(){
    $("#submitButton").click(function(){
        $("#myModal").modal();
    });
});
Alperzkn
źródło
1

Spróbuj tego

myModal1 jest identyfikatorem modalu

$('#myModal1').modal({ show: true });
vivek
źródło
0 
<script type="text/javascript">
    $(function () {
        $("mybtn").click(function () {
            $("#my-modal").modal("show");
        });
    });
</script>
Sahnosh Rahguzar
źródło
3
Odpowiadając na pytania, które już mają odpowiedzi, spróbuj rozwinąć istniejące odpowiedzi. Ponadto ogólnie dobrym pomysłem jest dołączenie wyjaśnienia, w jaki sposób kod odpowiada na pytanie.
Chris Camaratta,
0

Bootstrap 4.3 - więcej tutaj

Pokaż fragment kodu

Kamil Kiełczewski
źródło