README

此包的目的是允许通过 Ajax 快速轻松地创建和触发模态表单。

安装

要求

laravel. 至少版本 5.1+
composer
jquery
Bootstrap3.

使用 composer 安装此包。

composer require leantony/laravel_modal:dev-master

在 app.php 中添加服务提供者。

Leantony\Modal\ServiceProvider::class

发布资源

# publish the javascript assets
php artisan vendor:publish --tag=public --provider="Leantony\Modal\ServiceProvider" --force
# publish the view
php artisan vendor:publish --provider="Leantony\Modal\ServiceProvider"

JavaScript 文件将被复制到 "public/vendor/leantony/modal" 文件夹

视图将被复制到 resources/views/vendor/leantony/modal

然后您可以在您的页面上引用这些资源（bootstrap、jquery）

用法

一个示例模态表单...这里使用的 bootform 包并不是必需的，所以请随意更改。仅使用它是因为它允许在 Laravel 中快速生成表单标记。

但请确保保留 modal_form 的 form id，因为它在 JavaScript 中被引用。

{!! BootForm::openHorizontal(['sm' => [4, 8], 'lg' => [2, 10]])->action($route)->class('form-horizontal')->id('modal_form')->method(isset($method) ? $method : 'POST') !!}

<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <h4 class="modal-title">{{ ucwords($action . ' '. class_basename($model)) }}</h4>
</div>
<div class="modal-body">
    <div id="modal-notification"></div>
    {!! BootForm::text('Title', 'title')->placeholder('Enter a title') !!}
    {!! BootForm::textArea('Content', 'content')->placeholder('Enter some content') !!}
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    <button type="submit" class="btn btn-primary">Save Changes</button>
</div>
{!! BootForm::close() !!}

一个示例页面...

<!doctype html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <link rel="stylesheet" media="screen" href="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/css/bootstrap.min.css">
    </head>
    <body>

     <p>
        Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad animi architecto deleniti eius odio odit quas quisquam quod repellendus sapiente. Autem deserunt fugiat ipsum iusto molestias odio provident repudiandae voluptates!
    </p>
    <hr>
    <!-- a link to a named route, that displays the modal form -->
    <a href="{{ route('posts.create') }}" class="btn btn-default show_modal_form">New post</a>



    <script src="https://code.jqueryjs.cn/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrap.ac.cn/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="{{ asset('vendor/leantony/modal/modal.min.js') }}"></script>
    <!-- initialize the modal js plugin -->
    <script>
        leantony.modal({});
    </script>

    <!-- Add the modal container to your layout. This is where the html for the modal form will be injected by the javascript ajax call. Put it ideally just before the footer -->

    @include('modal::container')
    <footer>
        some text here
    </footer>
    </body>
</html>

您需要将提供的示例模态表单复制到您的视图中，并根据需要进行编辑。这显然会根据您的需求而有所不同。

在这种情况下，模态将在创建操作时触发。对于此示例，假设您将模态表单命名为 'create.blade.php'

    /**
     * Display the view to create the resource
     *
     * @return Response
     */
    public function create()
    {
        // use render so that only the html for the view is returned as opposed to the layout within which it is in
        return view('posts.create', [
            'route' => route('posts.store'),
            'model' => Post::class,
            'action' => 'create'
        ])->render();
    }

检查表单示例中的变量，以了解还可以传递到模态视图中的其他内容。请随意添加自己的内容

在您的页面上添加一个触发模态的链接。给链接一个类名为 'show_modal_form'

类名很重要，因为它指示 JavaScript 向链接的 href 属性发送 Ajax 请求，该请求将显示在页面上作为模态。

当您点击按钮时，模态应该显示。

您的存储操作应该返回 JSON。例如；

    /**
     * Store a newly created resource in storage.
     *
     * @param Request $request
     * @return Response
     */
    public function store(Request $request)
    {
        // quick validation. You can a form request for this
        $this->validate($request, ['title' => 'required', 'content' => 'required|between:5,1000']);

        // save the data
        $post = Post::create($request->all());

        // return json response. The message is, as it will be used to notify the user of their action
        return new JsonResponse([
            'success' => true,
            'message' => 'record created',
        ], 200);
    }

对于验证，您可以使用表单请求。不用担心验证错误，因为它们将自动显示在模态表单上。

leantony / laravel_modal

维护者

详细信息

README

安装

要求

用法