@mykolaim
PHP developer

Как реализовать модальное окно Blade?

layout.blade.php
<div class="modal" data-backdrop="false" id="@yield('id')" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">@yield('title')</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            @yield('content')

        </div>
    </div>
</div>
<script>
    $("#@yield('id')").on("show", function () {
        $("body").addClass("modal-open");
    }).on("hidden", function () {
        $("body").removeClass("modal-open")
    });
    $(document).ready(function () {
        if(window.location.hash.substr(1) == '@yield('id')'){
            $("#@yield('id')").modal('show');
        }
    });

</script>

modal-color.blade.php
@extends('modals.layout')
    @section('id',$id)
    @section('title',$title)
    @section('content')
    <form class="form-horizontal" method="POST" action="{{route('settings.index.color.update',['color'=>$beltColor_id])}}">
        {{csrf_field()}}
        <div class="modal-body">
            <div class="form-group{{ $errors->has('color') ? ' has-error' : '' }}">
                <label for="color" class="col-md-4 control-label label-left">Цвет</label>
                <div class="col-md-3">
                    <input id="color" type="text" class="form-control" value="{{$beltColor_name}}"  name="color" required>
                    @if ($errors->has('color'))
                        <span class="help-block">
                                    <strong>{{ $errors->first('color') }}</strong>
                                </span>
                    @endif
                </div>
            </div>

            <div class="form-group{{ $errors->has('code') ? ' has-error' : '' }}">
                <label for="code" class="col-md-4 control-label label-left">Код</label>
                <div class="col-md-3">
                    <input id="code" type="text" class="form-control" value="{{$beltColor_code}}" name="code" required>
                    @if ($errors->has('code'))
                        <span class="help-block">
                            <strong>{{ $errors->first('code') }}</strong>
                        </span>
                    @endif
                </div>
            </div>

        </div>
        <div class="modal-footer" style="margin-top: 3%">
            <button type="button" class="btn btn-secondary" data-dismiss="modal">@lang('buttons.close')</button>
            <button type="submit" class="btn btn-primary">@lang('buttons.save')</button>
        </div>
    </form>

    @stop


Как вставить это модальное окно в файл несколько раз ? Или может есть более правильная реализация ?
  • Вопрос задан
  • 189 просмотров
Пригласить эксперта
Ответы на вопрос 1
xpert13
@xpert13
Full Stack Developer
Переиспользуемые шаблоны (такие как модальные окна), нужно делать через компоненты и слоты

Пример кода модального окна с моего проекта
modal.blade.php
<div class="modal fade in" id="{{ $name }}" tabindex="-1" role="dialog" aria-hidden="false" style="display:none;">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
                <h4 class="modal-title">{{ $title }}</h4>
            </div>
            <div class="modal-body">
                {{ $slot }}
            </div>
            <div class="modal-footer">
                {{ $buttons }}
            </div>
        </div>
    </div>
</div>


template.blade.php
@component('admin.shared.modal')
    @slot('name', 'user-modal')
    @slot('title', 'New user')

    <div class="form-group">
        <label for="user-name">User name *</label>
        <input id="user-name" class="form-control" name="name" type="text" value="" data-user-id="">
    </div>

    <div class="form-group">
        <label for="user-email">User email *</label>
        <input id="user-email" class="form-control" name="email" type="email" value="">
    </div>

    <div class="form-group">
        <label for="user-password">User password *</label>
        <input id="user-password" class="form-control" name="password" type="password" value="">
    </div>

    <div class="form-group">
        <label>
            {{ Form::checkbox('is_admin', 1, false, ['id' => 'is_admin']) }}
            Is admin
        </label>
    </div>

    @slot('buttons')
        <button type="submit" class="btn btn-success" id="save">Save user</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    @endslot
@endcomponent
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через TM ID
Похожие вопросы
4px Москва
от 100 000 до 150 000 руб.
FUTUROOM Самара
от 150 000 руб.
Digital-агентство Nimax Санкт-Петербург
от 80 000 до 110 000 руб.
20 авг. 2018, в 07:25
180000 руб./за проект
20 авг. 2018, в 02:05
1000 руб./за проект