View

<div class="row">
    <div class="col-md-6">
        <div class="card card-custom gutter-b example example-compact">

            <div class="card-header">
                <h3 class="card-title">Page xxx</h3>
            </div>

			<div class="card-body">
				<button wire:click="toggleModal" class="btn btn-success">Open Modal Ajax</button>

				@if($showModal)
					@teleport('body')
						<div id="exampleModal" class="modal fade show" tabindex="-1" style="display: block;" aria-hidden="false">
							<div class="modal-dialog">
								<div class="modal-content">
									<div class="modal-header">
										<h5 class="modal-title">Bootstrap Modal</h5>
									</div>
									<div class="modal-body">
										<textarea wire:model="content" class="form-control" rows="3"></textarea>
									</div>
									<div class="modal-footer">
										<button type="button" class="btn btn-secondary" wire:click="toggleModal">Close</button>
										<button type="submit" wire:click='save' class="btn btn-light-success font-weight-bold">Save Post</button>
									</div>
								</div>
							</div>
						</div>
					@endteleport
				@endif
			</div>
        </div>
    </div>

<style>
	.font-size-h3 {
		font-size: 3.5rem !important;
	}
	.error {
		color: #F64E60;
	}
</style>
</div>

@script
<script>
    $js('onPostSaved', () => {
		$('#exampleModal').modal('show');
    });

	$js('closeModal', () => {
		$('#exampleModal').modal('hide');
    });
</script>
@endscript