136 views

Hoe open je een Bootstrap modaal venster met jQuery?

Hosted by Code Expert
javascript

Ik gebruik de functionaliteit van het modale venster van Twitter Bootstrap. Wanneer iemand op verzenden op mijn formulier klikt, wil ik het modale venster tonen door op de “verzendknop” in het formulier te klikken.

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

Antwoord 1, autoriteit 100%

Bootstrap heeft een paar functies die handmatig kunnen worden aangeroepen op modals:

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

Je kunt hier meer zien: Bootstrap modale component

Met name de sectie methodensectie.

Je zou dus moeten veranderen:

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

naar:

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

Als je zelf een aangepaste pop-up wilt maken, is hier een voorgestelde video van een ander communitylid:

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

Antwoord 2, autoriteit 6%

Bovendien kunt u gebruiken via data-attribuut

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

In dit specifieke geval hoeft u geen javascript te schrijven.

Je kunt hier meer zien: http://getbootstrap.com/2.3.2/ javascript.html#modals

Antwoord 3, autoriteit 6%

Meestal, wanneer $('#myModal').modal('show');niet werkt, wordt dit veroorzaakt doordat jQuery twee keer is opgenomen. 2 keer jQuery opnemen zorgt ervoor dat modals niet werken.

Verwijder een van de links om deze weer te laten werken.

Bovendien veroorzaken sommige plug-ins ook fouten, voeg in dit geval

. toe

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

Antwoord 4

Bel gewoon de modale methode (zonder parameters te passeren) met jQuerySelector.

Hier is voorbeeld: 

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

Antwoord 5

Als u de Onclick-functie van Links gebruikt om een ​​modal door jQuery te bellen, kan de “HREF” niet null.

Bijvoorbeeld: 

... ...
<a href="" onclick="openModal()">Open a Modal by jQuery</a>
... ...
... ...
<script type="text/javascript">
function openModal(){
    $('#myModal').modal();
}       
</script>

De modal kan niet laten zien.
De juiste code is: 

<a href="#" onclick="openModal()">Open a Modal by jQuery</a>

Antwoord 6

Hier is het laden van bootstrap alert zodra het document klaar is. Het is heel eenvoudig, gewoon toevoegen 

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

Ik heb een demo op 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>

Antwoord 7

Bekijk hier de complete oplossing:

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

Zorg ervoor dat u bibliotheken in de vereiste volgorde plaatst om resultaat te krijgen:

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

(Met andere woorden jquery.min.js moet worden aangeroepen vóór 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>

Antwoord 8

Ik heb verschillende methoden geprobeerd die faalden, maar de onderstaande werkte als een tierelier:

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

Antwoord 9

Probeer jQueryte gebruiken in plaats van het $teken bij het aanroepen van de functie, het werkte in mijn geval zoals je hieronder kunt zien.

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

jQuery.noConflict();omdat wanneer jQuery(‘#myModal’).modal(‘show’); niet werkt, wordt veroorzaakt doordat jQuery twee keer is opgenomen. 2 keer jQuery opnemen zorgt ervoor dat modals niet werken. en het zou het probleem in dat geval oplossen, zoals in mijn geval het zich herhaalt.

Verder kunt u naar deze link gaan

Bootstrap-modelvenster wordt niet weergegeven door te bellen via JQuery

Antwoord 10

Probeer

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

Om de modal te openen of te sluiten met id myModal.

Als het bovenstaande niet werkt, betekent dit dat bootstrap.js is overschreven door een ander js-bestand.
Hier is een oplossing

1:- Verplaats bootstrap.js naar beneden zodat het andere js-bestanden overschrijft.

2:- Zorg ervoor dat de volgorde is zoals hieronder

<script src="plugins/jQuery/jquery-2.2.3.min.js"></script>
<!-- Other js files -->
<script src="plugins/jQuery/bootstrap.min.js"></script>

Antwoord 11

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

Je kunt de modal starten met de onderstaande code.

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

Antwoord 12

Probeer dit

myModal1 is de id van modal

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

Antwoord 13

<script type="text/javascript">
    $(function () {
        $("mybtn").click(function () {
            $("#my-modal").modal("show");
        });
    });
</script>

Antwoord 14

Bootstrap 4.3– meer hier

Antwoord 15

Probeer dit eens. Het werkt goed voor mij.

function clicked(item) {
         alert($(item).attr("id"));
        }
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-rtl/3.4.0/css/bootstrap-rtl.css" rel="stylesheet"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<button 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">
        <h2>Modal in CSS</h2>
        <a href="#close" class="btn-close" aria-hidden="true">×</a> <!--CHANGED TO "#close"-->
      </div>
      <div class="modal-body">
        <p>One modal example here.</p>
      </div>
      <div class="modal-footer">
        <a href="#close" class="btn">Nice!</a>  <!--CHANGED TO "#close"-->
      </div>
      </div>
    </div>
  </div>
  <!-- /Modal -->

Antwoord 16 

<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#staticBackdrop">
  Launch static backdrop modal
</button>
<!-- Modal -->
<div class="modal fade" id="staticBackdrop" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Understood</button>
      </div>
    </div>
  </div>
</div>
Previous articlejQuery heeftAttr-controle om te zien of er een attribuut is op een element
Next articleEen .txt-bestand lezen met behulp van Scanner Class in Java

Other episodes

Is een functie die Math.random() puur aanroept?

javascript Code Expert - 0
Is het volgende een pure functie? function test(min,max) { return Math.random() * (max - min) + min; } Ik heb begrepen dat een pure...
Read more

Ik wil een tekst of regel met ellips afkappen met JavaScript

javascript Code Expert - 0
Ik ben op zoek naar een eenvoudig script dat een string kan afkappen met ellips (...) Ik wil iets als 'this is a very long...
Read more

firebase.firestore() is geen functie bij het initialiseren van Cloud Firestore

javascript Code Expert - 0
Toen ik Firebase Cloud Firestore probeerde te initialiseren, kwam ik de volgende fout tegen: Uncaught TypeError: WEBPACK_IMPORTED_MODULE_0_firebase.firestore is geen functie Ik heb eerder firebase...
Read more

Hoe krijg ik een hoogte van een toetsenbord in React-Native?

javascript Code Expert - 0
Ik gebruik React-Navigation in mijn app en de app bestaat uit StackNavigator met meerdere schermen, waarvan sommige schermen TextInput hebben met autoFocus={true} Probleem:op deze schermen...
Read more

ReferenceError: prestatie is niet gedefinieerd bij gebruik van performance.now()

javascript Code Expert - 0
Ik krijg een foutmelding ReferenceError: performance is not definedwanneer ik performance.now()om de uitvoeringstijd van een functieaanroep te meten: export async function find(someId: string, ctx: context.IContext)...
Read more

Herhaal een reeks objecten in Typescript

javascript Code Expert - 0
Ik moet de reeks objecten in hoek 2 herhalen en de weergave van de tekenreekslengte voor een bepaalde sleutel in het object beperken. this.productService.loadAllProducts(product).subscribe(data =>...
Read more

Zet lengtebeperking in een TextField in react js

javascript Code Expert - 0
Ik neem een ​​invoer van de gebruiker van het kaartnummer en wil dat de lengte die door de gebruiker wordt ingevoerd niet kleiner en...
Read more

© Copyright - Code Expert 2021