Zweites unterschiedlich aussehende Modale

Hallo ich möchte gerne ein zweites modal in meiner Seite benutzen. Der Knackunkt ist es soll anders aussehen.

Als im augenblicklich habe ich diesen Link der das Modal aufruft (Button will ich nicht)

<a href="#" class="menu-link" data-toggle="modal" data-target="#myModal"><h2>Modal 1</h2></a>             
                                        <!-- The Modal -->
                                     <div class="modal fade" id="myModal">
                                         <div class="modal-dialog modal-lg">
                                                <div class="modal-content">
                                        <!-- Modal Header -->
                                   <div class="modal-header">
                                       <h5 class="modal-title">Modal 1</h5>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>

* ................
     Modal      
................ */

.modal-content {
     background-color: #f2e694;
      color: rgb(2, 0, 0);
  }
  .modal-header {
  background-color: #860303;
  
  }
  .modal-title {
  color: #fff;
  font-size: 2em;
  font-weight: bold;
  }
  .modal h2 {
    color: #fff;
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-style:italic;

Kann mir eine ein Beispiel mit 2 Modale aufzeigen? Ich hab mir im Netz den Wolf gesucht

Was ich herausgefunden habe ist, dass ich wohl eine zweite Id brauche. Doch wie das im Code aussieht habe ich leider nichts gefunden.

O Gott stehe mir bei!

In deinem Code konnte ich herauslesen, dass ich auf jeden Fall 2 Id's brauch.

Und jetzt was ich schon seit genau kennen sollte!

Für jedes modal wird eine Regel erstellT

# myModal1

unter den Regeln stehen die Classen

#myModal 2

dem entsprechende classen.

Bitte seht mir das nach. Ich schäme mich selbst weil es vor mir steht. Aber ich hätte es gerne bestätigt. dass ich es richtig verstanden zu haben,

Bedrücktes Schweigen war die Folge!

Oder: Alle Eintracht Fans

Zitat von Sempervivum

Wenn Du die beiden Modale unabhängig öffnen willst, wirst Du ohnehin zwei IDs brauchen:

Code

<a href="#" class="menu-link" data-toggle="modal" data-target="#myModal1"><h2>Modal 1</h2></a>             
<a href="#" class="menu-link" data-toggle="modal" data-target="#myModal2"><h2>Modal 2</h2></a>             
                                        <!-- The Modal -->
                                     <div class="modal fade" id="myModal1">
                                         <div class="modal-dialog modal-lg">
                                                <div class="modal-content">
                                        <!-- Modal Header -->
                                   <div class="modal-header">
                                       <h5 class="modal-title">Modal 1</h5>
                                            <button type="button" class="close" data-dismiss="modal">&times;</button>
                                </div>

                                        <!-- The Modal -->
                                     <div class="modal fade" id="myModal2">
                                         <div class="modal-dialog modal-lg">
<!-- usw. für Modal 2

Alles anzeigen

Dann ist auch das individuelle Styling kein Problem:

Code

#myModal1 .modal-content {
    background-color: #f2e694;
    color: rgb(2, 0, 0);
}
#myModal1 .modal-header {
    background-color: #860303;
}
#myModal2 .modal-content {
    background-color: lightblue;
    color: rgb(64, 0, 0);
}
#myModal2 .modal-header {
    background-color: lightsalmon;
}

Alles anzeigen

Alles ungetestet aber ich erwarte keine Problem dabei.

Bei mir hat es nicht geklappt und auch "mein Internet" ist nicht hilfreich. Keine Beispiele gefunden.

Klar

my.emess62.de

Unter Menu -> Ausführliche Speiskarte

Genau jetz braüchte ich ein Zweites mit anderem Style

So hab online gestellt soweit hab ich das ja kapiert

Aber Modal soll sich im Style unterscheiden adere Schrift andere Headerfarbe Hintergrund usw.

Damit tu ich mich sehr schwer

my.emess62.de