0

我正在尝试为每个“编辑”按钮显示一个模式，就在我单击“编辑”按钮时，它没有打开，我按照 Foundation 6 的文档中提到的那样做。这是我的代码。请提供任何帮助。

<ul class="button-group">

我给每个显示模式一个基于字段 id 的 id，我将有不同的 id 并将每个编辑按钮与其模式链接

    <li>
        <a class="button tiny" data-open="editModal<?php echo $contact->id ;?>"
           data-contact-id="<?php echo $contact->id;?>">Edit</a>
        <!-- the modal edit start here -->

        <div class="reveal large editmodal" id="editModal<?php echo $contact->id ;?>"
             data-cid="<?php echo $contact->id ;?>" data-reveal>


            <div class="grid-x grid-margin-x">
                <div class="cell large-12"><h1>Edit Contact</h1></div>
            </div>

编辑模式的形式

            <form action="#" id="editadress" method="post">
                <div class="grid-x grid-margin-x">
                    <div class="cell large-6">

名字输入字段

                        <label>First Name
                            <input type="text" name="first_name" placeholder="Enter Your First Name"
                                   value="<?php echo $contact->first_name; ?>">
                        </label>

                    </div>
                    <div class="cell large-6">

姓氏输入栏

                        <label>Last Name
                            <input type="text" name="last_name" value="<?php echo $contact->last_name; ?>"
                                   placeholder="Enter Your Last Name">
                        </label>
                    </div>
                </div>

表单的提交按钮

                <div class="grid-x grid-margin-x">
                    <div class="cell large-12">
                        <input class="button big abutton right small" name="submit" type="submit" value="Submit"/>
                    </div>
                </div>
            </form>

模态的关闭按钮

            <button class="close-button" data-close aria-label="Close modal" type="button">
                <span aria-hidden="true">&times;</span>
            </button>

        </div>
        <!--The modal edit ends here-->
    </li>
    <li>
        <a class="button alert tiny">Delete</a>
    </li>

</ul>
4

0 回答 0