README

Laramodal 提供了一个易于使用的接口来在 Laravel 中使用 Bootstrap 模态框

安装

Composer

"require": {
    "awkwordstudio/laramodal": "v0.1.0"
}

然后运行 composer update。

Laravel 配置

将 Laramodal 服务提供者添加到 app/cofig/app.php 文件中的 providers 数组

	'Awkwordstudio\Laramodal\LaramodalServiceProvider::class,'

接下来在 app/cofig/app.php 文件的 aliases 数组中，您可以添加 Modal 门面。

	'Modal'  => 'Awkwordstudio\Laramodal\Facades\Modal',

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

php artisan asset:publish Awkwordstudio/Laramodal

前端

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

后端

视图

视图应扩展默认的 Laramodal::layout。Bootstrap 模态框中有三个可扩展的部分：modal-body 和 modal-footer，或者使用 modal-content 可以替换整个模态内容。

views/dialogs/login.blade.php

@extends('laramodal::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
use Modal;
class AuthController extends BaseController
{
	public function showLoginDialog()
	{
		$foo = '';
		return Modal::make('dialogs.login', compact('foo'));
	}
}

路由

Route::get('login', 'AuthController@showLoginDialog');

启动您的模态框

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

重定向

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

return Modal::redirect($url);

选项

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

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

数据属性

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

点击

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

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

提交

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

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

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

JavaScript

您还可以通过 JavaScript 启用 laramodal 用于表单和按钮。

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

选项

只有两种选项可用，即模态容器是HTML的body，以及Ajax缓存选项是false，两者都是默认设置。

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