twitter-bootstrap 一页中的多个模态
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29777617/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Multiple modals in one page
提问by roome0
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
和模态 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.
我认为 .btn 有问题，它只会接受一个 btn。但我不知道如何制作它，所以我可以多次使用 .btn。
.btn2 does not work.
.btn2 不起作用。
回答by sdla4ever
In your js you are calling the modal.show() method. The value for which modal to show never changes.
在您的 js 中，您正在调用 modal.show() 方法。显示模态的值永远不会改变。
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.
但是您可以避免使用 JS 内容并data-toggle="modal"在链接上使用html5 属性。如此处所示http://getbootstrap.com/javascript/#modals。
