一页中的多个模式

Posted 2023-02-22

【中文标题】一页中的多个模式

【英文标题】：Multiple modals in one page

【发布时间】：2015-06-28 22:24:15

【问题描述】：

我正在尝试在一页中获取多个模式（弹出窗口）。

一个按钮可以让你看到你有什么主题，当你点击它时，一个模式会打开并告诉你什么时间和什么作业。

另一个按钮可以让你添加新数据，然后会打开一个模式让你添加新数据。

先制作新的数据模态

但是现在我有一个问题，当我点击主题按钮时，会出现新数据按钮的模态，我不知道为什么。

这是代码：

<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 不起作用。

【问题讨论】：

你能在 JS Fiddle 或 Bootply 上模拟一下吗？

我不知道这意味着什么对不起:(

jsfiddle.net 或 bootply.com 允许您创建代码模型，供人们使用以解决问题。目前模拟你的代码并不容易，因为它包含很多 PHP，所以它不能直接应用在 jsfiddle 或 bootply 中。如果您可以在类似这些网站的网站上模拟您的代码并将其包含在您的问题中，那么它可以大大帮助您解决这个问题。

啊啊啊谢谢！我现在明白了。

我会尝试创建一个模型给我秒

【参考方案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。

【讨论】：

我已经尝试过引导版本，但它似乎对我不起作用！我得到了这个结果：gyazo.com/1817f05b21935caa0a481898a1576cd9 这意味着它不起作用，我不能玩它

【参考方案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()