<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
<h2 style="text-align:center">Image Picker Created By <span class="red" style="color:red">M</span>ilind <span class="red" style="color:red">K</span>amthe</h2>
<p style="text-align:center">creativemk22@gmail.com</p>
<hr>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<!-- Basic Picker with custom data -->
<div class="panel panel-danger">
<div class="panel-heading">
<div class="panel-title">Image Picker</div>
</div>
<div class="panel-body">
<div class="form-group form-inline">
<label class="control-label">Color: </label>
<input id="starSearch" type="text" class="form-control" disabled="disabled" />
<button type="button" class="btn btn-md btn-danger" data-toggle="modal" data-target="#MyModal" data-backdrop="false">Select image</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal fade" id="MyModal" role="dialog" >
<div class="modal-dialog modal-sm modal-sub" style="margin-top: 150px;margin-right:200px">
<!-- Modal content-->
<div class="modal-body">
<div class="modal-content">
<input id="MyModal-search" type="text" placeholder="Search..." class="form-control"><div><table class="table table-hover table-bordered table-condensed">
<tbody>
<tr>
<td style="text-align: center;"><img src="https://www.gstatic.com/webp/gallery/1.jpg" width="50" title="Image-1"/></td>
<td style="text-align: center;"><img src="https://www.gstatic.com/webp/gallery/2.jpg" width="50" title="Image-2"/></td>
<td style="text-align: center;"><img src="https://www.gstatic.com/webp/gallery/3.jpg" width="50" title="Image-3"/></td>
<td style="text-align: center;"><img src="https://www.gstatic.com/webp/gallery/4.jpg" width="50" title="Image-4"/></td>
</tr>
<tr>
<td style="text-align: center;"><img src="https://www.gstatic.com/webp/gallery/4.jpg" width="50" title="Image-5"/></td>
<td style="text-align: center;"><img src="https://www.gstatic.com/webp/gallery/3.jpg" width="50" title="Image-6"/></td>
<td style="text-align: center;"><img src="https://www.gstatic.com/webp/gallery/2.jpg" width="50" title="Image-7"/></td>
<td style="text-align: center;"><img src="https://www.gstatic.com/webp/gallery/1.jpg" width="50" title="Image-8"/></td>
</tr>
<tr>
<td style="text-align: center;"><img src="https://www.gstatic.com/webp/gallery/1.jpg" width="50" title="Image-9"/></td>
<td style="text-align: center;"><img src="https://www.gstatic.com/webp/gallery/2.jpg" width="50" title="Image-10"/></td>
<td style="text-align: center;"><img src="https://www.gstatic.com/webp/gallery/3.jpg" width="50" title="Image-11"/></td>
<td style="text-align: center;"><img src="https://www.gstatic.com/webp/gallery/4.jpg" width="50" title="Image-12"/></td>
</tr>
<tr><td colspan="4"> <button type="button" class="close text-danger" data-dismiss="modal">Click Here To Close</button></td></tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
<script>
</script>
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
.control-label{margin-left:80px;margin-right:15px;}
.btn{box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);}
#starSearch{box-shadow: .5px 0px 1px #b2b2b2;
-webkit-box-shadow: .5px 0px 1px #b2b2b2;
-o-box-shadow: .5px 0px 1px #b2b2b2;
background: rgb(207,207,207);
background: -moz-linear-gradient(top, rgba(207,207,207,1) 0%, rgba(255,255,255,1) 49%, rgba(207,207,207,1) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(207,207,207,1)), color-stop(49%,rgba(255,255,255,1)), color-stop(100%,rgba(207,207,207,1)));
background: -webkit-linear-gradient(top, rgba(207,207,207,1) 0%,rgba(255,255,255,1) 49%,rgba(207,207,207,1) 100%);
background: -o-linear-gradient(top, rgba(207,207,207,1) 0%,rgba(255,255,255,1) 49%,rgba(207,207,207,1) 100%);
background: -ms-linear-gradient(top, rgba(207,207,207,1) 0%,rgba(255,255,255,1) 49%,rgba(207,207,207,1) 100%);
background: linear-gradient(to bottom, rgba(207,207,207,1) 0%,rgba(255,255,255,1) 49%,rgba(207,207,207,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cfcfcf', endColorstr='#cfcfcf',GradientType=0 );
border-radius: 5px;
-webkit-border-radius: 5px;
-o-border-radius: 5px;}
$(document).ready(function() {
$('img').click(function(){
$('#starSearch').val($(this).attr('title'));
})
});
