javascript jquery twitter_bootstrap

Jak otworzyć modal Bootstrap za pomocą jQuery?

Używam modalnej funkcjonalności Twittera Bootstrap. Gdy ktoś kliknie przycisk Prześlij na moim formularzu, chcę wyświetlić modal po kliknięciu przycisku Prześlij na formularzu.

<form id="myform" class="form-wizard">

 <h2 class="form-wizard-heading">BootStap Wizard Form[/b]>

 <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[/b]>

 

 <div class="modal-body">

 One fine body… 

 <div class="modal-footer">

 <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

 <button class="btn btn-primary">Save changes</button>

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();

});

Zaproszony:

15 odpowiedzi

Anonimowy użytkownik

Potwierdzenie od:

Bootstrap ma kilka funkcji, które można wywołać ręcznie na czasownikach modalnych:

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

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

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

Więcej szczegółów można znaleźć tutaj:

Składnik modalny Bootstrap
https://getbootstrap.com/docs/ ... odals
W szczególności,

sekcja "metody
http://getbootstrap.com/javascript/#modals-methods
".
Więc będziesz musiał zmienić:

$('#my-modal').modal({

 show: 'false'

});

do:

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

Jeśli chcesz stworzyć własne wyskakujące okienko, oto sugerowany film od innego członka społeczności:
https://www.youtube.com/watch?v=zK4nXa84Km4
https://www.youtube.com/watch?v=zK4nXa84Km4

Anonimowy użytkownik

Potwierdzenie od:

Alternatywnie możesz użyć atrybutu via data

<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/ ... odals
http://getbootstrap.com/2.3.2/ ... odals

Anonimowy użytkownik

Potwierdzenie od:

Najczęściej, gdy

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

nie działa, jest to spowodowane dwukrotnym dołączeniem jQuery. Dołączenie jQuery sprawia, że modały nie działają 2 razy.
Usuń jedno z łączy, aby znów działało.
Ponadto niektóre wtyczki również powodują błędy, w tym przypadku dodaj

jQuery.noConflict(); 

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

Anonimowy użytkownik

Potwierdzenie od:

Po prostu wywołaj metodę modalną (bez przekazywania żadnych parametrów) za pomocą selektora

jQuery

.
Oto przykład:

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

Anonimowy użytkownik

Potwierdzenie od:

Jeśli używasz funkcji links onclick do wywoływania modalu jQuery, to „href” nie może mieć wartości null.
Na przykład:

... ...

[url="" onclick="openModal()">Open a Modal by jQuery[/url]... ...... ...

<script type="text/javascript">function openModal(){ $('#myModal').modal();

} 

</script>

Modalne nie mogą się wyświetlać.
Prawidłowy kod to:

[url="#" onclick="openModal()">Open a Modal by jQuery[/url]

Anonimowy użytkownik

Potwierdzenie od:

Oto jak załadować alert bootstrap, gdy dokument jest gotowy. To bardzo proste, wystarczy dodać

$(document).ready(function(){

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

});

Zrobiłem

próbny
https://www.w3schools.com/code ... J6Y6T
-wersja w W3Schools.
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-html lang-html prettyprint-override">

<!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="[url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">]https://maxcdn.bootstrapcdn.co ... gt%3B[/url]

 <script src="[url=https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>]https://ajax.googleapis.com/aj ... gt%3B[/url]

 <script src="[url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>]https://maxcdn.bootstrapcdn.co ... gt%3B[/url]

</head>

<body><div class="container">

 [b]Here is how to load a bootstrap modal as soon as the document is ready [/b]>

 <!-- 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[/b]>

 

 <div class="modal-body">

 Some text in the modal. 

 <div class="modal-footer">

 <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>

 

 

 

 

 

 

<script>

$(document).ready(function(){

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

});

</script></body>

</html>

Anonimowy użytkownik

Potwierdzenie od:

Sprawdź pełne rozwiązanie tutaj:
http://www.w3schools.com/downl ... d%3Dh
http://www.w3schools.com/boots ... d%3Dh
Upewnij się, że biblioteki zostały umieszczone we właściwej kolejności, aby uzyskać wynik:
1 - Pierwszy plik bootstrap.min.css 2- jquery.min.js 3- bootstrap.min.js
(Innymi słowy, jquery.min.js należy wywołać przed bootstrap.min.js)

<link rel="stylesheet" href="[url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"><script]https://maxcdn.bootstrapcdn.co ... cript[/url] src="[url=https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">]https://ajax.googleapis.com/aj ... gt%3B[/url]

</script>  <script src="[url=https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>]https://maxcdn.bootstrapcdn.co ... gt%3B[/url]

Anonimowy użytkownik

Potwierdzenie od:

Wypróbowałem kilka metod, które zawiodły, ale poniższe działały na mnie jak zaklęcie:

$('#myModal').appendTo("body").modal('show');

Anonimowy użytkownik

Potwierdzenie od:

Spróbuj użyć

jQuery

zamiast znaku

$

podczas wywoływania funkcji 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. Dołączenie jQuery sprawia, że modały nie działają 2 razy. i to rozwiązałoby problem w przypadku powtórzenia się w moim przypadku.
Następnie możesz skorzystać z tego linku
Okno ładowania modelu nie jest wyświetlane po wywołaniu JQuery
https://coderoad.ru/53697389/

Anonimowy użytkownik

Potwierdzenie od:

Spróbuj

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

Aby otworzyć lub zamknąć modal z identyfikatorem myModal.
Jeśli powyższe nie działa, oznacza to, że plik bootstrap.js został nadpisany przez inny plik js.
Oto rozwiązanie tego problemu
1: - przenieś plik bootstrap.js w dół, aby zastąpić inne pliki js.
2: - Upewnij się, że kolejność jest taka, jak pokazano poniżej

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>

<!-- Other js files -->

<script src="plugins/jQuery/bootstrap.min.js"></script>

Anonimowy użytkownik

Potwierdzenie od:

<form id="myform" class="form-wizard">

 <h2 class="form-wizard-heading">BootStap Wizard Form[/b]>

 <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[/b]>

 

 <div class="modal-body">

 One fine body… 

 <div class="modal-footer">

 <button class="btn" data-dismiss="modal" aria-hidden="true">Close</button>

 <button class="btn btn-primary">Save changes</button>

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

$(document).ready(function(){

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

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

 });

});

Anonimowy użytkownik

Potwierdzenie od:

<script type="text/javascript">

 $(function () {

 $("mybtn").click(function () {

 $("#my-modal").modal("show");

 });

 });

</script>

Anonimowy użytkownik

Potwierdzenie od:

Spróbuj tego
>myModal1 jest identyfikatorem obiektu modalnego

$('#myModal1').modal({ show: true });

Anonimowy użytkownik

Potwierdzenie od:

Spróbuj tego. To działa dobrze dla mnie.
<div class="snippet-code">
<div class="snippet" data-babel="false" data-console="true" data-hide="false" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">

function clicked(item) {

 alert($(item).attr("id"));

 }

<link href="[url=https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css"]https://cdnjs.cloudflare.com/a ... ot%3B[/url] rel="stylesheet"/>

<script src="[url=https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script><button]https://cdnjs.cloudflare.com/a ... utton[/url] onclick="clicked(this);" id="modalME">Click me</button><!-- Modal -->

 <div class="modal" id="modalME" aria-hidden="true">

 <div class="modal-dialog">

 <div class="modal-header">

 [b]Modal in CSS[/b]>

 [url="#close" class="btn-close" aria-hidden="true">×[/url] <!--CHANGED TO "#close"-->

 

 <div class="modal-body">

 One modal example here. 

 <div class="modal-footer">

 [url="#close" class="btn">Nice![/url] <!--CHANGED TO "#close"-->

 

 

 

 

 <!--/Modal -->

Anonimowy użytkownik

Potwierdzenie od:

Bootstrap 4.3

- więcej szczegółów

tutaj
https://getbootstrap.com/docs/ ... odal/
<div class="snippet-code snippet-currently-hidden">
<div class="snippet" data-babel="false" data-console="true" data-hide="true" data-lang="js">
<pre class="snippet-code-js lang-js prettyprint-override">

$('#exampleModal').modal();

<!-- Initialize Bootstrap 4 --><link rel="stylesheet" href="[url=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"]https://stackpath.bootstrapcdn ... ot%3B[/url] integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<script src="[url=https://code.jquery.com/jquery-3.3.1.slim.min.js"]https://code.jquery.com/jquery ... ot%3B[/url] integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>

<script src="[url=https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"]https://cdnjs.cloudflare.com/a ... ot%3B[/url] integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

<script src="[url=https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"]https://stackpath.bootstrapcdn ... ot%3B[/url] integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

<!-- MODAL --><div class="modal fade" id="exampleModal" tabindex="-1" role="dialog">

 <div class="modal-dialog" role="document">

 <div class="modal-content">

 

 <div class="modal-body">

 Hello world 

 

 

 <div class="modal-footer">

 <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

Aby odpowiedzieć na pytania, Zaloguj się lub Zarejestruj się

Jak otworzyć modal Bootstrap za pomocą jQuery?

15 odpowiedzi

Powiązane pytanie

Stan problemu

Jak otworzyć modal Bootstrap za pomocą jQuery?

Linki dotyczące treści

15 odpowiedzi

Powiązane pytanie

Stan problemu