我试图在一个页面中获得多个模态（弹出的东西）。
一个按钮可以让你看到你有什么科目，当你点击它时，一个模态将打开，并显示你在什么时间和家庭作业是什么。
另一个按钮将允许您添加新数据，并将打开一个模态，允许您添加新数据。
首先建立了新的数据模型。
但现在我遇到了这样的问题，当我点击主题按钮时，新数据按钮的模态会出现，我不知道为什么。
这是代码：
<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无法工作。
2条答案
按热度按时间cbwuti441#
在js中调用modal.show（）方法，要显示的modal的值永远不会改变。
应该看起来像这样
但是你可以避免使用JS属性，在你的链接上使用
data-toggle="modal"html5属性，如下所示http://getbootstrap.com/javascript/#modals。xzv2uavs2#
到目前为止，我们有
chakra-ui，它提供了modal，可以像这样使用：但这仅仅是对单一模态中的一个组件象：
要在组件中使用多个模态，只需如下声明：