README

Symfony 2.6+ 的Bundle，可以轻松将页面加载到Bootstrap模态窗口中。如果加载到模态窗口中的页面包含表单，表单将通过ajax提交。

安装

步骤 1：将以下内容添加到 composer.json 的 "require" 部分

"sideclick/bootstrap-modal-bundle": "dev-master"

或者直接从命令行要求此Bundle

composer require sideclick/bootstrap-modal-bundle

步骤 2：启用Bundle

在kernel中启用Bundle

<?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>

步骤 4

此Bundle依赖于Bootstrap 3.x和jQuery 1.x。您必须在任何使用此Bundle的页面上包含这两个库。

用法

旧用法（已弃用）

现在，您只需在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])
    }
}

如果您计划在多个地方使用模态，建议创建一个单独的“基础控制器”，所有其他控制器都从此控制器扩展。

就这样！

tiitoo / bootstrap3-modal-bundle

维护者

详细信息