dyg81/modal-bundle

Symfony 扩展包，让您轻松打开 Bootstrap 模态框。

维护者

详细信息

github.com/dyg81/modal-bundle

主页

源代码

问题

安装次数: 182

依赖者: 0

建议者: 0

安全性: 0

星标: 3

关注者: 0

分支: 0

开放问题: 1

语言:JavaScript

类型:symfony-bundle

v2.0.5 2021-11-08 12:28 UTC

Requires

MIT 67e95a9d596b8b637c7cf332d4dfdadc1b4e5e89

  • Donald Yañez González <donald.yanez.woop@gmail.com>
  • Rares Serban <raresserban96.woop@gmail.com>

symfonybootstrapbundleajaxmodal

This package is auto-updated.

Last update: 2024-09-08 18:53:07 UTC

README

这个 symfony 扩展包是基于不再维护的 Rares/ModalBundle 进行分支开发的。

这个新的扩展包旨在与 Symfony 3.4/4.4/5.x 一起工作，简化在模态框中显示内容的过程。它提供了一些功能，从显示简单的消息和确认模态框到在模态框中显示完整的表单。

版本历史

v1.0.0 - First release. Support only Symfony 3.4 based on the [Symfony Standard Edition](https://github.com/symfony/symfony-standard).
v1.0.1 - Fix a minor issue.
v1.0.2 - Improve symfony/framework-bundle syntaxis in the composer.json file.
v1.0.3 - Drop DynamicPageBundle support.
v1.1.0 - Change the require section in composer.json to support only Symfony 3.4 installed via [Symfony Website Skeleton](https://github.com/symfony/website-skeleton).
v1.2.0 - Merge v1.0.3 and v1.1.0 to support both installations of Symfony 3.4.
v1.2.1 - Add the LICENSE file and the correct translations files.
v1.2.2 - Remove unnecesary files and folders.
v1.3.0 - Change the require section to support sf4.4 and drop sf3.4 support.
v1.4.0 - Add the dependency injection service to support sf5.2. Any other version is unsupported from now on.
v1.4.1 - Delete unnecesary branch-alias section from composer.json.
v2.0.0 - Restructured the bundle to meet Symfony new standars. Add sf5.3 support, and sf4.4 again as well, drop sf5.2 support.
v2.0.1 - Fix wrong explanation in the README.md file
v2.0.2 - Improve bundle requeriments
v2.0.3 - Add backdrop block to baseModal.html.twig
v2.0.4 - Fix wrong code in the installation section
v2.0.5 - Add modal size block to baseModal.html.twig

安装

要安装此扩展包，首先您需要安装 jQuery3 和 Bootstrap4。

然后您需要要求安装此扩展包

  composer require "dyg81/modal-bundle"

重要！如果您在安装扩展包到 Symfony 3.4 时遇到问题，请明确指出所需的版本：composer require "dyg81/modal-bundle:1.2.2"

之后，将以下代码添加到 routing.yml 或 annotations.yaml 文件中，具体取决于您正在使用的 symfony 版本，以便控制器路由能够正常工作

dyg81modalbundle:
    resource: "@Dyg81ModalBundle/src/Controller/"
    type:     annotation

在 Symfony 3.4 标准版中，在您的 AppKernel 文件中启用扩展包

$bundles = [
	...,
	new Dyg81\ModalBundle\Dyg81ModalBundle(),
];

提示：如果您使用 symfony flex，上述过程是自动的。

然后使用以下命令安装资源

bin/console assets:install --symlink

最后，您需要将一个 JavaScript 文件包含在您想要使用模态框的模板中，我建议将其包含在基础模板中

<script src="{{ asset('bundles/dyg81modal/js/scripts.js') }}"></script>

如果您想在 AJAX 请求时显示加载图标，还应添加此模块中包含的 CSS 文件

<link rel="stylesheet" href="{{ asset('bundles/dyg81modal/css/ajax-progress.css') }}">

功能

ModalBundle 提供两种基本的模态框类型：内容模态框，可以包含表单，以及确认模态框。您还可以使用此扩展包在表单提交成功后打开模态框。我们将查看所有不同的模态框类型以及如何使用它们。

请注意，此扩展包一次只能打开一个模态框，因为这默认是 Bootstrap 的行为。

此外，在执行 AJAX 请求时，在点击的元素之后添加一个具有类 ajax-progress 和 ajax-progress-throbber 的 div 元素，如果点击的元素有 id，则还会添加一个动态类 ajax-progress-ELEMENTID。在这个 div 内部还有一个具有类 throbber 的 div，渲染一个小的 gif 文件。如果您不希望使用默认的加载 gif，则不应在项目中包含此 CSS 文件或根据需要自定义 CSS。

内容模态框

内容模态框是基本类型的模态框，可以用来在模态框中显示几乎任何内容。

此扩展包包含一个简单的控制器操作，该操作显示一个作为参数传递的可翻译信息消息，如果需要向用户显示简单消息，则可以使用。控制器操作如下所示

    /**
         * Helper function to display a simple translatable message in a modal.
         * The link to this route should have the attributes:
         *  class: modal-open
         *
         * @Route("/modal/open/{message}", name="dyg81_modal_open_message")
         */
        public function openMessageModalAction($message)
        {
            return $this->render('@Dyg81Modal/messageModal.html.twig', [
                'message' => $this->get('translator')->trans($message),
            ]);
        }

messageModal.html.twig 模板只是一个简单的模板，它扩展了 baseModal.html.twig 模板，并在模态框体中显示一条消息。baseModal.html.twig 是一个模态框的基础文件，具有多个可以重写的块。您可以在这里查看它 here。

要从 twig 文件打开一个简单的消息模态框，我们需要在可点击元素上放置 modal-open 类，该元素应该具有一个 href 属性，其中包含到控制器操作的路径，例如如下所示

<button type="button" href="{{ path('dyg81_modal_open_message', {'message': 'info.message'}) }}" class="btn btn-secondary modal-open">Open Message Modal</button>

如果想在模态框中显示自定义内容，也可以轻松实现。我们需要创建一个控制器操作，它应该返回一个扩展 baseModal.html.twig 模板的模板，或者我们也可以创建自己的自定义模态框模板。以下是一个控制器操作的示例：

    /**
     * Finds and displays a ContactMessage entity.
     *
     * @Route("/modal/{id}", name="contact_show_modal")
     * @Method("GET")
     */
    public function showModalAction(ContactMessage $contactMessage)
    {
        $deleteForm = $this->createDeleteForm($contactMessage);

        return $this->render('contact/showModal.html.twig', array(
            'contactMessage' => $contactMessage,
            'delete_form' => $deleteForm->createView(),
        ));
    }

在 twig 文件中，我们可以创建一个具有相同类 modal-open 的元素，并将 href 属性指向我们的控制器操作。

<a href="{{ path('contact_show_modal', { 'id': contactMessage.id }) }}" class="modal-open" data-modal-id="contact-modal">Show Contact Modal</a>

如上例所示，我们还指定了属性 data-modal-id。此属性将用于打开具有特定 id 的模态框。如果有自定义模态框模板，或者在我们这里设置了自定义 id 的情况下，这很有用。baseModal.html.twig 模板的默认 id 是 base-modal，建议所有模态框都使用此 id。

在模态框中打开表单

在模态框中打开表单与打开正常模态框非常相似，只需对控制器操作进行一些调整即可。

示例：打开表单的链接

<a href="{{ path('contact_edit_modal', { 'id': contactMessage.id }) }}" class="modal-open">Edit Modal</a>

在控制器操作中，需要显式设置表单的表单操作 URL，最好是设置到相同的控制器操作。当表单成功提交时，应通过返回一个新的 ModalRedirectResponse 对象来实现到新页面的重定向，该对象接受一个 URL 作为参数。

提交表单时，它将通过 AJAX 调用提交，然后如果没有发生重定向，模态框将关闭并打开一个新表单，该表单应包含任何表单错误。因此，在表单模态框上不能有模态动画。您可以在 这里 找到没有动画的模态框表单的基础模板。

请注意，如果模态框中有多个表单，则只有第一个表单将使用 AJAX 提交。以下是一个控制器操作的示例，该操作返回一个扩展上述模板的模态框表单模板。

    /**
     * Displays a form in a modal to edit an existing ContactMessage entity.
     *
     * Every form displayed inside a modal should have the action url explicitly
     * set.Also, if the form is valid, redirecting should be done by return a
     * ModalRedirectResponse object.
     *
     * @Route("/modal/{id}/edit", name="contact_edit_modal")
     * @Method({"GET", "POST"})
     */
    public function editModalAction(Request $request, ContactMessage $contactMessage)
    {
        $deleteForm = $this->createDeleteForm($contactMessage);
        $editForm = $this->createForm(ContactMessageType::class, $contactMessage, [
            // Make sure to explicitly set the action.
            'action' => $this->generateUrl('contact_edit_modal', ['id' => $contactMessage->getId()])
        ]);
        $editForm->add('save', SubmitType::class, ['label' => 'Edit']);

        $editForm->handleRequest($request);

        if ($editForm->isValid()) {
            $em = $this->getDoctrine()->getManager();
            $em->persist($contactMessage);
            $em->flush();

            $this->addFlash('notice', 'Entity edited.');

	    // On success, redirection should be done by returning a new ModalRedirectResponse object.
            return new ModalRedirectResponse($this->generateUrl('contact_index'));
        }

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

确认模态框

这是一种特殊的模态框类型，用于确认用户输入。ModalBundle 提供了一个默认的控制器操作来打开基本的确认模态框。

    /**
         * Helper function to open a simple confirm modal.
         * The link to this route should have the attributes:
         *  class: modal-open-confirm
         *  data-modal-href: {{ path('dyg81_modal_open_confirm') }}
         *
         * @Route("/modal/confirm", name="dyg81_modal_open_confirm")
         */
        public function openConfirmModalAction()
        {
            return $this->render('@Dyg81Modal/baseConfirmModal.html.twig');
        }

此模态框的模板文件可以在 这里 找到。它显示标题和正文消息，这些是可翻译的，也可以重写，并且还有两个按钮，一个用于关闭模态框，另一个是确认按钮。确认按钮需要具有 modal-btn-confirm 类才能使模态框正常工作。如果您想为这种类型的模态框创建自定义布局，请记住这一点。

此模态框以与内容模态框不同的方式打开。需要添加到元素的类是 modal-open-confirm，并且该元素还需要将属性 data-modal-href 设置为返回确认模态框模板的控制器操作。也支持 data-modal-id 属性。

此类也可以放在表单元素上，如按钮和输入框，确认后表单将被提交，或者放在锚点元素上，确认后浏览器将重定向到 href 链接。以下是如何在链接上使用此模态框类型的示例。

<a href="{{ path('contact_index') }}" class="modal-open-confirm" data-modal-href="{{ path('dyg81_modal_open_confirm') }}">Open Confirm Modal</a>

或者它可以用在表单内的按钮上

return $this->createFormBuilder()
            ->add('delete', SubmitType::class, [
                'attr' => [
                    'class' => 'modal-open-confirm',
                    'data-modal-href' => $this->generateUrl('dyg81_modal_open_confirm'),
                ],
            ])
            ->setAction($this->generateUrl('contact_delete', array('id' => $contactMessage->getId())))
            ->setMethod('DELETE')
            ->getForm()
        ;

表单成功提交后打开模态框

最后，使用此包还可以在表单成功提交后打开模态框而不重新加载页面。如果您想有一个多步表单示例，这很有用。

您需要做的就是在表单上添加类 modal-open-from-form。然后表单将通过ajax提交，如果发现错误，页面将重新加载，如果没有错误，则会打开一个模态框。要打开模态框，当表单成功提交时，您应该返回类型为 ModalOpenResponse 的响应。这需要两个参数，第一个是从中加载模态框的URL，这应该返回一个简单的模态框或表单模态框。第二个参数是可选的，如果想要具有自定义ID的模态框，则是模态框的ID。

示例响应

if ($form->isValid()) {
    // Process your data...

    return new ModalOpenResponse(
        $this->generateUrl('contact_edit_modal', ['id' => $contactMessage->getId()]),
        'your_custom_modal_id_or_null'
    );
}