Mehrere Bootstrap-Modale in einer einzelnen Seite

In einer Seite gibt es etwa 150 Untermenüs (erweiterbar). Jeder Klick auf ein Untermenü öffnet ein Modal mit spezifischen Informationen für das Untermenü. Die Daten werden anfangs abgerufen, wenn die Seite geladen wird. Ich frage mich, was ist eine bessere Möglichkeit, die Modale zu implementieren.Mehrere Bootstrap-Modale in einer einzelnen Seite

Sollte ich 150 Modale auf der gleichen Seite schreiben, oder einen modalen schreiben dann den Inhalt dynamisch erstellen?

Für die letztere Option brauche ich ein Beispiel.

Eingesetzte Technologien: Bootstrap, HTML, CSS, jQuery

Quelle

2016-07-21 FlintOff

Sind Sie Daten von PHP zu holen? –

@ Mr.Developer: Nein. Daten sind statisch. Ich habe die Daten schon. – FlintOff

@VishalPanara: Ich möchte nicht mehrere Modale in einer einzelnen Seite zeigen. Ich würde gerne ein Modal nach dem anderen zeigen. Aber das Problem ist, den Code dahinter für alle Mods zu schreiben. – FlintOff

Sie können dieses Beispiel mag ich erstellt haben, lassen Ich weiß, wenn Sie nicht wo verstehen.

$(document).ready(function(e) { 
 
    // Initializing our modal. 
 
    $('#myModal').modal({ 
 
     backdrop: 'static', 
 
     keyboard: false, 
 
     show: false, 
 
    }); 
 

 
    $(document).on("click", ".modalButton", function() { 
 

 
     var ClickedButton = $(this).data("name"); 
 

 
     // You can make an ajax call here if you want. 
 
     // Get the data and append it to a modal body. 
 

 

 
     $(".modal-body").html("<p>" + ClickedButton + "</p> <p>Some text in the modal.</p> "); 
 
     $('#myModal').modal('show'); 
 
    }); 
 

 
});

<!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="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"> 
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
    </head> 
 
    <body> 
 
     <div class="container"> 
 
     <h2>Modal Example</h2> 
 
     <!-- Trigger the modal with a button --> 
 
     <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 1" data-toggle="modal">Open Modal 1</button> 
 
     <!-- Trigger the modal with a button --> 
 
     <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 2" data-toggle="modal">Open Modal 2</button> 
 
     <!-- Trigger the modal with a button --> 
 
     <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 3" data-toggle="modal" >Open Modal 3</button> 
 
     <!-- Trigger the modal with a button --> 
 
     <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 4" data-toggle="modal">Open Modal 4</button> 
 
     <!-- Trigger the modal with a button --> 
 
     <button type="button" class="btn btn-info btn-lg modalButton" data-name="Clicked Modal 5" data-toggle="modal">Open Modal 5</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>

Sie können einen einzelnen modal nur erstellen. und wie Sie erwähnt haben Sie 150 Menü, so dass Sie ihnen einen gemeinsamen Klassennamen geben können und eine jquery verwenden, um das click -Ereignis dieser Schaltfläche/Menü zu erhalten. Sie können einige Ajax-Aufruf haben, um einige dynamische Daten zu erhalten, wenn Sie möchten. hänge deine Antwort an den modalen Körper an und zeige nur das Modal. Das ist es!!

Quelle

2016-07-21 06:37:39

Sehr hilfreiche Antwort. –

Wie man einige Daten wie Tabellendaten (10 Reihen) für modals behält? Ich möchte nicht nur den Titel ändern, auch den Inhalt des modalen – FlintOff

, wie ich gesagt habe. Sie können Ajax anrufen,. Holen Sie sich die Antwort mit der Tabelle im HTML-Format und laden Sie sie in Ihren modalen Text. –

Natürlich sollten Sie eine modale schreiben und Inhalte auf Abruf erzeugen. Wenn Sie mit der ersten Option gehen, müssen Sie jedes Mal, wenn Sie eine Änderung im gemeinsamen Bereich vornehmen müssen, +150 Dateien ändern! Das ist ein sehr schlechter Ansatz.

Sie müssen daran denken, dass die Webanwendung konsistent sein sollte. Auf diese Weise sparen Sie sich viel Zeit und Mühe.

Auch, wie planen Sie, es abzuziehen. Laden Sie 150 modale Fenster auf einmal und dann auf Daten warten: P

Die Weise, die ich es sehe - ein modales, das ein Rahmenwerk sein wird und dann mit Daten füllen, addieren möglicherweise Sachen, wenn Sie es in anderer Schablonendatei benötigen für besonderen Fall.

Prost!

Quelle

2016-07-21 06:31:22 Robert

Sie können ein Modal auf Ihrer Seite schreiben. Dann jedes Mal ein Untermenü klicken, rufen Sie eine asynchrone Funktion die entsprechenden Daten zu erhalten, hängen Sie sie an den Modal und zeigen es:

jQuery

$(document).on('click', '.submenu', function() { 
    $.ajax({ 
     url: 'path/to/file', 
     method: 'POST', 
     data: { ... }, 
     success: function(data) { 
     // Get the data and fill the modal 
     // Show modal 
     $('#myModal').modal('show'); 
     }, 
     error: function() { 
     // Error handling 
     } 
    }); 
});

Quelle

2016-07-21 06:32:38 kapantzak

Laden Sie die Daten dynamisch mit jQuery. Ich nehme an, Sie haben Knöpfe, um jedes Modal zu öffnen?

http://jsfiddle.net/h3WDq/

$('#myModal1').on('show.bs.modal', function (event) { 
var button = $(event.relatedTarget) // Button that triggered the modal 
// Extract info from data-* attributes 
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback). 
// Update the modal's content. I'm using use jQuery here, you could use it to load your data 
var modal = $(this) 
modal.append("<p>Test</p>"); 
})

Quelle

2016-07-21 06:51:04 Alan

Mehrere Bootstrap-Modale in einer einzelnen Seite

Antwort

Verwandte Themen