一页中的多个模态

Question

我试图在一页中获得多个模态（弹出窗口）。

一个按钮可以让你看到你有什么主题，当你点击它时，一个模式将打开并显示你在什么时间和家庭作业是什么。

另一个按钮可让您添加新数据，并会打开一个模式让您添加新数据。

首先创建新的数据模态。

但是现在我遇到的问题是，当我单击主题按钮时，会出现新数据按钮的模式，我不知道为什么。

这是代码：

<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">&times;</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 不起作用。

Answer 1

在您的 js 中，您正在调用 modal.show() 方法。 显示模态的值永远不会改变。

应该看起来像这样

$(".btn").click(function(){
  var id = $(this).attr('id');
  $(id).modal('show');
});

但是您可以避免使用 JS 内容并在链接上使用data-toggle="modal" html5 属性。 如此处所示http://getbootstrap.com/javascript/#modals 。

Answer 2

到目前为止，我们有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()