How to implement a modal Blade window?

Question

Laravel

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

How to insert this modal window in a file multiple times? Or maybe there is a better implementation?

Answer 1

Reusable templates (such as modal windows) need to be done via components and slots

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

@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