我试图在一个页面中获得多个模态（popup thingies）。
一个按钮可以让你看到你有什么主题，当你点击它时，会打开一个模态，告诉你什么时间和作业是什么。
另一个按钮可以让您添加新数据，并打开一个模式，可以添加新数据。
首先制作新的数据模式。
但现在我遇到的问题是，当我点击主题按钮时，会出现新数据按钮的模态，我不明白为什么。
这是代码：
<script type="text/javascript">
$(document).ready(function(){
$(".btn").click(function(){
$("#myModal1").modal('show');
});
});
</script>
模态一个！
<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>
和模态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>";
我认为.btn有问题，并且它只接受一个btn。但我不知道怎么做，所以我可以多次使用.btn。
.btn2不起作用。
答案 0 :(得分：0)
在你的js中你正在调用modal.show（）方法。要显示的模态的值永远不会更改。
应该看起来像这样
$(".btn").click(function(){
var id = $(this).attr('id');
$(id).modal('show');
});
但是你可以避免使用JS的东西并在你的链接上使用data-toggle="modal" html5属性。如图所示http://getbootstrap.com/javascript/#modals。
答案 1 :(得分：0)
到目前为止，我们有 chakra-ui，它提供了 modal，可以像这样使用：
const {
isOpen,
onOpen,
onClose
} = useDisclosure()
但这仅适用于一个组件中的单个模态，例如：
<>
<Modal isOpen={isOpen} onClose={onClose}>
...Modal Code...
<Modal/>
<Button onClick={onOpen}>
button
<Button/>
</>
要使其在组件中具有多个模态，只需像这样声明：
const {
isOpen: isOpenAssets,
onOpen: onOpenAssets,
onClose: onCloseAssets
} = useDisclosure()
const {
isOpen: isOpenAlert,
onOpen: onOpenAlert,
onClose: onCloseAlert
} = useDisclosure()