README

Bootmodal使得Laravel（目前仅适用于Laravel 4.2）的后端和前端开发者更容易使用Bootstrap模态框。在管理界面中，模态对话框被广泛使用，但实现它们总是耗时且涉及大量重复工作，尤其是在通过AJAX发出请求时。
Bootmodal Laravel包提供后端和前端类和插件，以加速此过程。

安装

Composer

"require": {
    "torgheh/bootmodal": "v0.1.0"
}

然后运行composer update。

Laravel配置

将Bootmodal服务提供者添加到app/cofig/app.php中的providers数组。

	'Torgheh\Bootmodal\BootmodalServiceProvider'

接下来，在app/cofig/app.php中的aliases数组下，您可以添加Modal外观。

	'Modal'  => 'Torgheh\Bootmodal\Facades\Modal',

最后，要将包的JavaScript资产移动到公共文件夹，请运行以下命令。

php artisan asset:publish torgheh/bootmodal

JavaScript插件必须添加到前端布局中。

<script src="{{asset('packages/torgheh/bootmodal/bootmodal.js')}}" ></script>

后端

模态框

在您的控制器中，您可以像在Laravel中创建视图一样创建模态视图并返回Ajax响应。视图应扩展默认的Bootmodal::layout。

return \Modal::make('dialogs.login')->with('data', $data);

您还可以将验证错误和旧输入数据添加到模态视图中。这在您在模态中执行Ajax表单验证时非常有用。

return \Modal::make('dialogs.login')->withInput()->withErrors($validation);

重定向

在某些情况下，您可能希望从Ajax响应转到正常重定向，例如在成功登录后。

return \Modal::redirect($url);

您还可以像Laravel一样将Laravel会话数据添加到重定向响应中。

retun \Modal::redirect($url)->withError($validator)->with('message', 'error');

选项

一些Bootstrap模态选项可以通过Modal对象进行调整。

• size: 对话框大小（正常、lg或sm）
• title: 模态标题
• animation: 模态动画
• dismiss: 关闭按钮

return \Modal::make('dialogs.login')->with('data', $data)->setOption('size', 'sm')->setOption('title', 'Login');

视图

视图扩展自bootmodal::layout。Bootstrap模态有三个可扩展的部分：modal-body和modal-footer，或使用modal-content可以替换整个模态内容。

前端

<script src="{{asset('packages/torgheh/bootmodal/bootmodal.js')}}" ></script>

数据属性

您可以将两种类型的事件绑定到HTML元素上，以触发Bootmodal，点击和提交。

点击

<a href="#" data-action="{{url('login')}}" data-toggle="bootmodal">Login</a>

这将通过data-action属性创建并显示一个模态对话框。

提交

<form action="{{url('login')}} method="post" data-toggle="bootmodal">

这将向action属性发送Ajax POST请求。

对于按钮，需要两个数据属性，data-toggle="bootmodal"和data-action。

JavaScript

您还可以通过JavaScript为表单和按钮启用Bootmodal。

$('#login-button').bootmodal();
$('#login-form').bootmodal();

选项

只有两个选项可用，模态容器是HTML body，Ajax缓存选项是false，默认值。

$('#edit-button').bootmodal({ container: $('#modal-container') });
$('#tos-button').bootmodal({ cache: true });

示例

视图

views/dialogs/login.blade.php

@extends('bootmodal::layout')
@section('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" >Login</h4>
	</div>

	<form id="login-form" action="{{url('login')}}" method="post" data-toggle="bootmodal">
		<div class="modal-body">
			<ul id="errors">
				@foreach($errors->all() as $error )
					<li>{{$error}}</li>
				@endforeach
			</ul>

			<label class="control-label">
			Email: <input type="text" class="form-control" name="email" value="{{\Input::old('email')}}">
			</label>

			<label class="control-label">
			Password: <input type="password" class="form-control" name="password">
			</label>
		</div>
		<div class="modal-footer text-right" >
			<input type="submit" class="btn btn-default" value="login">
		</div>

	</form>
@stop

控制器

controllers/AuthController.php

<?php
class AuthController extends BaseController
{
	public function showLoginDialoge()
	{
		$foo = '';
		return \Modal::make('dialogs.login', compact('foo'));
	}
	public function postLogin()
	{
		$rules = ['email'=>'required|email', 'password'=>'required' ];
		$validator = \Validator::make(\Input::all(), $rules);
		
		if($validator->passes()){
		
			///authentication process
			return \Modal::redirect('home')->with('message', 'Successful login');
		}
		return \Modal::make('dialogs.login')->withErrors($validator)->withInput();
	}
	...
}

路由

Route::get('login', array( 'uses'=>'AuthController@showLoginDialoge') );
Route::post('login', array( 'uses'=>'AuthController@postLogin') );

前端

<a href="#" data-action="{{url('login')}}" data-toggle="bootmodal">Login</a>