Mehrere modals in eine Seite
Ich versuche, mehrere modals (popup-Dingern) auf einer Seite.
Einer Taste, können Sie sehen, welches Motiv Sie haben, und wenn Sie auf es ein modal öffnen und zeigen Ihnen an, welche Zeit und was die Hausaufgabe war.
Die andere Taste, lassen Sie neue Daten hinzufügen, und ein modales öffnen, mit denen Sie neue Daten hinzufügen.
Den neuen Daten modal wird aus ersten.
Aber jetzt habe ich das problem, dass wenn ich auf das Thema button, der modal auf die Schaltfläche neue Daten werden angezeigt, und ich habe keine Ahnung, warum.
Dies ist der code:
<script type="text/javascript">
$(document).ready(function(){
$(".btn").click(function(){
$("#myModal1").modal('show');
});
});
</script>modal eins!
<a href="#myModal1" class="btn btn-lg btn-primary">Nieuwe taak toevoegen</a>
<div id="myModal1" class="modal fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Nieuwe taak toevoegen</h4>
</div>
<div class="modal-body">
<table>
<tr>
<form id="form1" action="<?php $_SERVER['PHP_SELF'];?>" method="POST">
<td>Naam voor afspraak:</td>
<td><input type="text" name="afspraak"></td></tr>
<tr></tr>
<tr>
<td></br>Omschrijving: </td>
<td><textarea cols="34" rows="5" name="description"></textarea></td>
</tr>
<tr></tr>
<tr>
<td>Datum:</td>
<td>
<select name="day">
<?php
//Selecteerd als eerste de dag van vandaag
echo "<option selected>" .Date('d')."</option>";
for($i = 1; $i <=31; $i++)
{
echo '<option value="'.$i.'">'.$i.'</option>';
}
?>
</select>
<select name="month">
<?php
//Selecteerd als eerste de maand van vandaag
echo "<option selected>" .Date('m')."</option>";
for($i = 1; $i <=12; $i++)
{
echo '<option value="'.$i.'">'.$i.'</option>';
}
?>
</select>
<select name="year">
<?php
//Selecteerd als eerste de jaar van vandaag
echo "<option selected>" .Date('Y')."</option>";
for($i = date("Y"); $i <= 2050; $i++)
{
echo '<option value="'.$i.'">'.$i.'</option>';
}
?>
</select>
</td>
</tr>
<tr></tr>
<tr>
<td>Tijd: </td>
<td><input type="time" name="tijd" value="<?php echo date('H:i:s');?>"></td>
</tr>
</table>
</div>
<div class="modal-footer">
<!--- <button type="submit" class="btn btn-default" data-dismiss="modal" value="Toevoegen" name="submit">Toevoegen</button>--->
<td><input type="submit" value="Toevoegen" name="submit"></td>
<!--- <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>--->
</div>
</div>
</div>
</form>und modal 2
echo "<a href='#myModal2' class='btn btn-primary' id='test'>$name</a>
<div id='myModal2' class='modal fade'>
<div class='modal-dialog'>
<div class='modal-header'>
<h4 class='modal-title'>$name</h4>
</div>
<div class='modal-body'>
<p><td>Datum: $datum </br /> Tijd: $tijd </br /> Opdracht: $huiswerk</td>
</div>
<div class='modal-footer'>
<button type=button' class='btn btn-default' data-dismiss='modal'>Sluiten</button>
</div>
</div>
</div>";Ich denke, es ist etwas falsch mit dem .btn, und dass Sie akzeptieren nur eine btn. aber ich habe keine Ahnung, wie die es so machen, die ich verwenden kann .btn mehrere Male.
.btn2 funktioniert nicht.
- Kann Sie verspotten diese bis auf JS-Fiddle oder Bootply?
- Ich habe keine Ahnung, was das bedeutet, tut mir Leid 🙁
- jsfiddle.net oder bootply.com können Sie erstellen Prototypen des Codes für die Menschen zu wollen, um Chaos mit für die Problembehandlung. Es ist derzeit nicht einfach zu verspotten, Ihren code, denn es enthält eine Menge von PHP, also kann es nicht direkt angewendet werden, entweder in jsfiddle oder bootply. Wenn könnten Sie mock-up der code auf so etwas wie diese Websites, und fügen Sie es in Ihre Frage, könnte es gehen ein langer Weg zu helfen Sie dieses problem lösen.
- ahhhhh danke! Ich bekomme es jetzt.
- Ich werde versuchen, erstellen Sie ein mockup gimme sec
- während der mockup-ich sehe, dass meine zweite modal ist nicht ganz gut bearbeitet. Hoppla.
- ich dachte, es ein paar Tage zurück! danke. anscheinend meine id falsch angegeben!
Schreibe einen Kommentar
Du musst angemeldet sein, um einen Kommentar abzugeben.
In Ihrem js Sie sind dem Aufruf der modal.show () - Methode. Der Wert für das modal zu zeigen, die sich nie ändert.
Sollte in etwa so Aussehen
Aber Sie vermeiden das JS Zeug, und verwenden Sie die
data-toggle="modal"html5-Attribut in den links. Wie hier gezeigt http://getbootstrap.com/javascript/#modals.