README

适用于 Symfony 2.6+ 的组件，使得将页面加载到 Bootstrap 模态窗口变得简单。如果一个页面包含表单并被加载到模态窗口中，表单将通过 AJAX 提交。

版本 0.* 与 symfony/symfony: ^2.6 | ^3.2 兼容

版本 1.* 与 symfony/framework-bundle: ^3.3 | ^4.0 | ^5.0 兼容

安装

步骤 1：使用 Composer 需求组件

composer require sideclick/bootstrap-modal-bundle

步骤 2：启用组件

如果你使用 Symfony 4，此步骤将自动完成。

在内核中启用组件

<?php
// app/AppKernel.php

public function registerBundles()
{
    $bundles = array(
        // ...
        new Sideclick\BootstrapModalBundle\SideclickBootstrapModalBundle(),
    );
}

步骤 3

在你的任何页面上，在关闭标签之前包含 JS 文件和空的模态 div，以便能够打开模态窗口。

Check if sideclick-bootstrap-modal.js is added to your Bundles Assets folder.
If not run please -  php bin/console assets:install

<div class="modal fade" id="emptyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" data-async data-target="#emptyModal">
    <div class="modal-dialog">
    </div>
</div>

<script src="{{ asset('bundles/sideclickbootstrapmodal/js/sideclick-bootstrap-modal.js') }}"></script>

步骤 3（Webpack Encore 替代方案）

如果你使用 Webpack Encore，你还可以在全局 JS 文件中导入 SideclickModal 类。

import SideclickModal from '../../public/bundles/sideclickbootstrapmodal/javascript/sideclick_modal';

new SideclickModal();

步骤 4

此组件依赖于 Bootstrap 3.x 或 Bootstrap 4.x 以及 jQuery 1.x。你必须在任何使用此组件的页面上包含这两个库。

使用方法

旧的使用方法（已弃用）

现在，你只需在 URL 的 href 值前添加 '#modal=' 来在模态窗口中打开页面。例如

<a href="#modal=/login">Login</a>

这种方法已弃用，因为它无法适应已经使用 hash 值的 URL

新的使用方法

现在，你只需添加一个 data 属性 - data-sideclick-modal-trigger 并设置 href 为必要的 URL。例如

<a href="/login" data-sideclick-modal-trigger>Login</a>

这将导致 /login 页面在模态窗口中加载，而不是在当前标签中。

可选：模态页面的建议结构

你加载到模态窗口中的页面应遵循此处描述的标准 Bootstrap 结构 https://bootstrap.ac.cn/javascript/#modals

以下是快速参考的结构

<div class="modal fade" tabindex="-1" role="dialog">
  <div class="modal-dialog" role="document">
    <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">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

可选：重定向与重新加载

控制模态窗口的 JavaScript 会响应特定的重新加载和重定向请求。你可以通过将页面加载到由你的控制器生成的自定义响应生成的模态窗口中来触发完整的页面重新加载或重定向。以下是两种方法的示例。

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\Request;

class DefaultController extends Controller
{
    // implement the BootstrapModalBundle Controller Trait which will
    // bring three methods: redirectWithAjaxSupport(), reloadWithAjaxSupport() & redirectToRouteWithAjaxSupport()
    use \Sideclick\BootstrapModalBundle\Controller\ControllerTrait;
    
    public function thisActionWillRedirect(Request $request)
    {
        return $this->redirectWithAjaxSupport($request, '/new/url')
    }
    
    public function thisActionWillReload(Request $request)
    {
        return $this->reloadWithAjaxSupport($request)
    }
    
    public function thisActionWillReload(Request $request)
    {
        return $this->redirectToRouteWithAjaxSupport($request,'route_name',['parameters'=>$parameters])
    }
}

如果你计划在各个地方使用模态窗口，建议创建一个单一的 'base 控制器'，你的其他控制器都从这个控制器扩展。

就这么多！

sideclick / bootstrap-modal-bundle

维护者

详细信息