how to call dialog window Laravel 5 - php

Question

I do this project using Laravel 5.
<td> {{ $ethenic->ethenicCode }} </td>
This is my Blade view file part of code. I want when I click this code open dialog box.
This is my div.
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
</span>
</span>
<h4 class="modal-title">Member Ethnicity Details</h4>
</div>
<!-- text input -->
<div class="modal-body">
{!! Form::label('e_code', 'Ethnicity Code: '); !!}
{!! Form::text('ethenicity_code', null, ['class' => 'form-control', 'id' => 'ethenicity_code', 'placeholder' => 'Enter Ethnicity Code here','disabled' => 'disabled']); !!}
{!! Form::label('e_name', 'Ethnicity Name: '); !!}
{!! Form::text('ethenicity_name', null, ['class' => 'form-control', 'id' => 'ethenicity_name', 'placeholder' => 'Enter Ethnicity Name here' ,'disabled' => 'disabled']); !!}
</div>
</div>
</div>
This both code in same x.blade.php file. Very beginning I use following code to call this div and working fine.
<td> {!! 'Event Name '.$i !!} </td>
but now I am try different way with in my Controller method to call this div id, but I couldn't.
Controller class code:
public function show($id) {
//
$designation = Designation::find($id);
return view('x.blade.php#myModal', compact('designation'));
}
My full x.blade.php file:
#extends('layouts.app')
#section('slide_bar')
#include('layouts.master_entry_slide_bar')
#endsection
#section('content')
<section class="content-header">
<h1>BASL Ethnicity <small>page </small></h1>
</section>
<br/>
<!-- Main content -->
<section class="content-fluid">
<div class="row">
<div class="col-xs-12">
<div class="box">
<div class="box-body">
<table id="example1" class="table table-bordered table-striped">
<col width='auto'>
<col width='auto'>
<col width='100'>
<thead>
<tr>
<th>Member Ethnicity Code</th>
<th>Member Name</th>
<th><p id='buttons'> <strong> Add New Ethnicity &nbsp </strong> <span class="glyphicon glyphicon-plus"></span> </p></th>
</tr>
</thead>
<tbody>
#foreach ($ethenics as $ethenic)
<tr>
<td> {{ $ethenic->ethenicCode }} </td>
<td> {{ $ethenic->ethenicName }} </td>
<td align='center'>
{!! Form::open(['method' => 'DELETE', 'route'=>['ethenics.destroy',$ethenic->id]]) !!}
<span class="glyphicon glyphicon-pencil"></span> &nbsp &nbsp
<button type="submit" class="btn btn-default btn-sm" onclick="return confirm('Are you sure?')"> <span class="glyphicon glyphicon-trash"></span> </button>
{!! Form::close() !!}
</td>
</tr>
#endforeach
</tbody>
<tfoot>
<tr>
<th>Member Ethnicity Code</th>
<th>Member Name</th>
<th></th>
</tr>
</tfoot>
</table>
</div><!-- /.box-body -->
</div><!-- /.box -->
</div><!-- /.col -->
</div><!-- /.row -->
</section><!-- /.content -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="btn btn-default" style='float: right;' data-dismiss="modal"><span class="glyphicon glyphicon-remove-circle"></span></button>
</span>
</span>
<h4 class="modal-title">Member Ethnicity Details</h4>
</div>
<!-- text input -->
<div class="modal-body">
{!! Form::label('e_code', 'Ethnicity Code: '); !!}
{!! Form::text('ethenicity_code', null, ['class' => 'form-control', 'id' => 'ethenicity_code', 'placeholder' => 'Enter Ethnicity Code here','disabled' => 'disabled']); !!}
{!! Form::label('e_name', 'Ethnicity Name: '); !!}
{!! Form::text('ethenicity_name', null, ['class' => 'form-control', 'id' => 'ethenicity_name', 'placeholder' => 'Enter Ethnicity Name here' ,'disabled' => 'disabled']); !!}
</div>
</div>
</div>
</div>
<script>
var name = document.getElementById("master_entry");
document.getElementById("master_entry").className = "active";
var slide_bar_element = document.getElementById("ane_menu");
document.getElementById("ane_menu").className = "active";
var slide_bar_element = document.getElementById("ane_submenu3");
document.getElementById("ane_submenu3").className = "active";
</script>
#endsection