Question

为什么我的模态在我链接时没有出现？我喜欢这个，我不知道哪里出错了？

在我的表格中，我的“编辑”按钮是一个下拉按钮，因为我在此表中加入了两个实体，因此当我单击编辑我的实体之一的链接时，模式不会出现，页面将变为淡入淡出。

edit.html.twig

<a data-toggle="modal" href="#edit{{ fruit.id }}">
    Edit
</a>
<div class="modal" id="edit{{ fruit.id }}">
    {{ form_start(edit_form, { 'method' : 'post', 'action': path('fruit_edit', { 'id' : fruit.id }) }) }}
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Edit</h4>
        </div>
        <div class="modal-body">
            {{ form_widget(edit_form) }}
            <input type="submit" value="Edit" />
        </div>
    </div>
    {{ form_end(edit_form) }}
</div>

index.html.twig

<td>
<div class="dropdown">
    <button class="btn btn-info dropdown-toggle btn-xs" type="button" data-toggle="dropdown">
        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
    </button>
    <ul class="dropdown-menu">
        <li>{{ render(controller('AppBundle:Fruit:edit', { 'id' : fruit.id } )) }}</li>
        <li>href="#">Categories</a></li>
    </ul>
</div>

控制器

public function editAction(Request $request, Fruit $fruit)
{
    $deleteForm = $this->createDeleteForm($fruit);
    $editForm = $this->createForm('AppBundle\Form\FruitType', $fruit);
    $editForm->handleRequest($request);

    if ($editForm->isSubmitted() && $editForm->isValid()) {
        $this->getDoctrine()->getManager()->flush();

        return $this->redirectToRoute('fruit_edit', array('id' => $fruit->getId()));
    }

    return $this->render('fruit/edit.html.twig', array(
        'fruit' => $fruit,
        'edit_form' => $editForm->createView(),
        'delete_form' => $deleteForm->createView(),
    ));
}

请帮我说明问题所在，谢谢！

Answer 1

您可以尝试将<div class="modal" ... ></div>容器移到<ul></ul>标记之外：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet"/>


<div class="dropdown">
    <button class="btn btn-info dropdown-toggle btn-xs" type="button" data-toggle="dropdown">
        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a data-toggle="modal" href="#edit5">
                Edit
            </a>
        </li>
        <li><a href="#">Categories</a></li>
    </ul>
    <div class="modal" id="edit5">
        <form>
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                    <h4 class="modal-title">Edit</h4>
                </div>
                <div class="modal-body">
                    <input>
                    <input type="submit" value="Edit" />
                </div>
            </div>
        </form>
    </div>
</div>

因此...

edit.html.twig

<div class="modal" id="edit{{ fruit.id }}">
    {{ form_start(edit_form, { 'method' : 'post', 'action': path('fruit_edit', { 'id' : fruit.id }) }) }}
    <div class="modal-content">
        <div class="modal-header">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
            <h4 class="modal-title">Edit</h4>
        </div>
        <div class="modal-body">
            {{ form_widget(edit_form) }}
            <input type="submit" value="Edit" />
        </div>
    </div>
    {{ form_end(edit_form) }}
</div>

index.html.twig

<td>
<div class="dropdown">
    <button class="btn btn-info dropdown-toggle btn-xs" type="button" data-toggle="dropdown">
        <span class="glyphicon glyphicon-edit" aria-hidden="true"></span>
    </button>
    <ul class="dropdown-menu">
        <li>
            <a data-toggle="modal" href="#edit{{ fruit.id }}">
                Edit
            </a>
        </li>
        <li>href="#">Categories</a></li>
    </ul>
    {{ render(controller('AppBundle:Fruit:edit', { 'id' : fruit.id } )) }}
</div>

Symfony 3莫代尔

1 个答案: