'Multiple modals in one page
I'm trying to get multiple modals (popup thingies) in one page.
One button will let you see what subject you have, and when you click on it an modal will open and show you at what time and what the homework was.
The other button will let you add new data, and a modal will open that let you add new data.
The new data modal is made first.
But now I have the problem that when I click the subject button the modal of the new data button will appear, and I have no idea why.
This is the code:
<script type="text/javascript">
$(document).ready(function(){
$(".btn").click(function(){
$("#myModal1").modal('show');
});
});
</script>
modal one!
<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>
and 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>";
I'm thinking there is something wrong with the .btn, and that it'll only accept one btn. but I have no clue how to make it so I can use .btn multiple times.
.btn2 does not work.
Solution 1:[1]
In your js you are calling the modal.show() method. The value for which modal to show never changes.
Should look something like this
$(".btn").click(function(){
var id = $(this).attr('id');
$(id).modal('show');
});
But you could avoid the JS stuff and use the data-toggle="modal" html5 attribute on your links. As shown here http://getbootstrap.com/javascript/#modals.
Solution 2:[2]
Up to now, we have chakra-ui which provides modal that can be used like:
const {
isOpen,
onOpen,
onClose
} = useDisclosure()
But this is just for a single modal in one component like:
<>
<Modal isOpen={isOpen} onClose={onClose}>
...Modal Code...
<Modal/>
<Button onClick={onOpen}>
button
<Button/>
</>
To make it multiple modals in the component, just declare like these:
const {
isOpen: isOpenAssets,
onOpen: onOpenAssets,
onClose: onCloseAssets
} = useDisclosure()
const {
isOpen: isOpenAlert,
onOpen: onOpenAlert,
onClose: onCloseAlert
} = useDisclosure()
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | sdla4ever |
| Solution 2 | nambk |