We Keep Coding

How do i make a javascript popup input field in php laravel?

I'm trying to make a popup module that once a button is clicked, it displays a popup with some fields like name surname etc that the user can fill out and save. However i tried to do that but i can't seem to connect it together. I'm not sure if anyone can give me directions on where i'm supposed to put the html css and javascript? As im using php laravel.
This is the view page.
#extends('layouts.adminmaster')
#section('section')
<div class="container paddingTop20">
<h1>Negombo View Places</h1>
<hr>
<div class="row">
<div id="date-picker-example" class="col-xs-3">
<form action="{{ route('admin.place.submit') }}" method="POST" id="form1" style="
padding: 7px;
margin-left: 15px;
justify-content: flex-end;
text-shadow: 0 0 black;
float: right;
">
#csrf
<input type="date" id="fDate" name="startDate" value="{{ $startDate ?? '' }}">
<input type="date" id="tDate" name="endDate" value="{{ $endDate ?? '' }}">
<input type="reset" value="Reset">
<input type="submit" value="Submit">
</form>
</div>
<div class="col-sm-12">
<table id="example" class="table table-striped table-bordered" style="width:100%">
<thead>
<tr>
<th>Place ID</th>
<th>Place Name</th>
<th>Coordinates (Umbrella)</th>
<th>Coordinates (N)</th>
<th>Coordinates (E)</th>
<th>Map Name</th>
<th>Availabilty</th>
#if (Auth::user()->role == "admin")
<th>Action</th>
#endif
<th>Quick Book</th>
</tr>
</thead>
<div id="preloader"></div>
<tbody id="hidden_table_processing">
#foreach ($places ?? '' as $place)
<tr>
<td>{{ $place->place_id }}</td>
<td>{{ $place->place_name }}</td>
<td>L({{ $place->co_xl }}, {{ $place->co_yl }})</td>
<td>{{ $place->coordsn }}</td>
<td>{{ $place->coordse }}</td>
<td>{{ $place->map_name }}</td>
<td>
#if ($place->status==0)
<span style="color: green">Available</span>
#endif
#if ($place->status==-1)
<span style="color: gray"> Not Available </span>
#endif
#if ($place->status==2)
<span style="color: red"> Booked </span>
#endif
</td>
#if (Auth::user()->role == "admin")
<td> Edit /
#if ($place->status == -1)
Activate
#else
Deactivate
#endif
</td>
#endif
<td>
#if ($place->status==0)
<span></span>
// THIS IS THE BUTTON WHERE ONCE CLICKED THE POPUP SHOULD SHOW UP
<button type="button" class="btn btn-success dashboardcardbodystyle2" data-toggle="modal" data-target="#myModal"></button>
// END
#endif
#if ($place->status==-1)
<span>Book</span>
#endif
#if ($place->status==2)
<span>Booked</span>
#endif
</td>
</tr>
#endforeach
</tbody>
</table>
<div id="loader_space"></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/pace/1.0.2/pace.min.js"></script>
<script>
$('#myModal').on('shown.bs.modal', function () {
$('#myInput').trigger('focus')
})
</script>
<script>
$('.input-daterange input').each(function() {
$(this).datepicker('clearDates');
});
</script>
<script>
var startDate = document.getElementById('fDate').value;
var endDate = document.getElementById('tDate').value;
document.write(startDate);
document.write(endDate);
paceOptions = {
ajax: true,
document: true,
eventLag: false
};
Pace.on('done', function() {
$('#preloader').delay(100).fadeOut(500);
document.getElementById("loader_space").style.display = "none";
$('#hidden_table_processing').fadeIn(200);
});
</script>
</div>
</div>
</div>
#endsection

You can do it something like this
<table class="table table-striped table-nowrap custom-table mb-0 " id="tblAllOrder">
<thead>
<tr>
<th>Price (£)</th>
<th>Status</th>
</tr>
</thead>
<tbody>
#foreach($orderList as $result)
<tr>
<td>{{$result->id}}</td>
<td>
{{$output[0]}} </br> {{$output[1]}}
</td>
#endforeach
</tbody>
</table>
And then add model anywhere where your section ends
<div class="modal right fade" id="project-details" tabindex="-1" role="dialog" aria-modal="true">
<div class="modal-dialog" role="document">
<button type="button" class="close md-close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<div class="modal-content" style="overflow-y: auto;">
<div class="modal-header">
<button type="button" class="close xs-close" data-dismiss="modal">×</button>
<div class="row w-100">
<div class="col-md-7 account d-flex">
Order Detail
</div>
</div>
</div>
<div class="orderDetail"> Order Detail </div>
</div><!-- modal-content -->
</div><!-- modal-dialog -->
</div><!-- modal -->
now when you click the anchor tag each time it will open this model.

Javascript SideBar Problems after Ajax call

I have a problem that will make me crazy, I've got a page that has a SideBar on the left that folds down. This sidebar, works very well when no ajax is called.
The problem occurs when an Ajax is called.
To be clearer the problem occurs with the require_once('../include/js/js.php');.
If I remove this part of the codes of the different ajax calls, the problem disappears, but I need this require once so that the array generated in the ajax is returned with the buttons provided by "DataTables.net" ( print button, copy....)
I thought I had solved the problem by removing the require_once('../include/js/js.php'); on my Ajax files, but in fact not because it removes the buttons I need .
From what I see, the require once doesn't work as I would like...
I searched for 5 hours trying everything, but I think I lack the knowledge to solve this problem...
I will show you my full code :
Main Page :
<?php
session_start();
if(isset($_SESSION["connection"]) && ($_SESSION["role"] >= 0)){
require_once("../../include/js/ShowNotif.php");
$title_page = "Historique d'un NameSpace - Beluga";
require_once("../../include/head.php");
?>
<!-- Main content -->
<div class="main-content" id="panel">
<!-- Topnav -->
<?php
require_once("../../include/navbar.php");
?>
<!-- Header -->
<!-- Header -->
<div class="header bg-primary pb-6">
<div class="container-fluid">
<div class="header-body">
<div class="row align-items-center py-4">
<div class="col-lg-6 col-7">
<h6 class="h2 text-white d-inline-block mb-0">Consultation</h6>
<nav aria-label="breadcrumb" class="d-none d-md-inline-block ml-md-4">
<ol class="breadcrumb breadcrumb-links breadcrumb-dark">
<li class="breadcrumb-item"><i class="fas fa-home"></i></li>
<li class="breadcrumb-item">NameSpace</li>
<li class="breadcrumb-item active" aria-current="page">Liste</li>
</ol>
</nav>
</div>
</div>
</div>
</div>
</div>
<!-- Page content -->
<div class="container-fluid mt--6">
<!-- Table -->
<div class="row">
<div class="col-md-12">
<div class="card-wrapper">
<!-- Input groups -->
<div class="card">
<!-- Card header -->
<div class="card-header bg-Default">
<h3 class="mb-0" style="color:white;">Historique d'un NameSpace</h3>
</div>
<!-- Card body -->
<div class="card-body bg-Default">
<!-- Input groups with icon -->
<div class="row">
<div class="col-md-6 mr-auto ml-auto">
<div class="form-group">
<!-- <div class="input-group input-group-merge">
<div class="input-group-prepend">
<span class="input-group-text"><i class="ni ni-collection"></i></span>
</div>
<input class="form-control" placeholder="Code SA" type="text" name="codesa" onkeyup="checkForEnterKey(this.value);" id="codesa" value="">
</div> -->
<label for="codesa" style="color:white;">CodeSA</label>
<div class="input-group mb-3">
<input type="text" class="form-control" id="codesa" name="codesa" placeholder="Saisir le code applicatif" aria-label="Saisir le code applicatif" aria-describedby="button-addon2">
<div class="input-group-append">
<button class="btn btn-outline-primary" type="button" id="clicksubmitsa" onclick="SubmitSA('SearchHistoryOfNamespace();');">Valider</button>
</div>
</div>
</div>
</div>
</div>
<div id="resultatlistsa"></div>
<!-- Input groups with icon -->
</div>
<div id="resultatlistofhistory"></div>
</div>
</div>
</div>
</div>
<!-- Footer -->
<?php
require_once("../../include/footer.php");
?>
</div>
</div>
<!-- Argon Scripts -->
<!-- Core -->
<?php
require_once("../../include/js/js.php");
require_once("../../include/js/historydeploymentofnamespacejs.php");
?>
</body>
</html>
<?php
}else{
header('Location: ../../connect.php');
} ?>
First Ajax call :
<?php
require_once('../include/php/AllFunction.php');
require_once('../include/js/js.php');
$codesa = strtolower($_POST['codesa']);
$fonction = $_POST['fonction'];
// SearchServicesOfANamespace(); SearchHistoryOfNamespace();
if(isset($codesa) && !empty($codesa)){
$bearer = "";
$Link = $ApiBaseLink."allhistorydeploymentnamespace";
$object = GetHTTPRequest($Link, $bearer);
if ($object != FALSE){
$NombreSA = sizeof($object);
?>
<div class="row">
<div class="col-md-8 mr-auto ml-auto">
<div class="form-group">
<label for="namespace" style="color:white;">NameSpaces</label>
<select id="namespace" name="namespace" data-toggle="select" class="form-control" onchange="<?php echo $fonction; ?>">
<!-- ShowLoadingProcess(); -->
<option selected disabled>Liste des namespaces</option>
<script>
var table = $('#datatable-buttons').DataTable();
table.destroy();
</script>
<?php
for($SA = 0; $SA < $NombreSA; $SA++){
$namespace = $object[$SA]["namespacename"];
if (strpos($namespace, $codesa) !== false) {
?>
<option value="<?= $namespace; ?>"><?= $namespace; ?></option>
<?php
}
}
?>
</select>
</div>
</div>
</div>
<?php
}else{
return http_response_code(404);
}
}
?>
After the selection, latest ajax call :
<?php
require_once('../include/php/AllFunction.php');
require_once('../include/js/js.php');
$bearer = "";
$namespace = strtolower($_POST['namespace']);
?>
<div class="row">
<div class="col">
<div class="card bg-Default">
<!-- Card header -->
<div class="card-header bg-Default">
<h3 class="mb-0" style="color:white;">Liste des services</h3>
<p class="text-sm mb-0" style="color:white;">
Voici l'ensemble de l'historique pour ce NameSpace.
</p>
</div>
<div class="table-responsive py-4">
<table class="table bg-white" id="datatable-buttons" data-turbolinks="false">
<thead class="thead-light">
<tr>
<th>NameSpace</th>
<th>Composant</th>
<th>Tag</th>
<th>Date déploiement</th>
<th>Date Création du Tag</th>
<th>Par</th>
<th>Date ajout composant</th>
</tr>
</thead>
<tfoot>
<tr>
<th>NameSpace</th>
<th>Composant</th>
<th>Tag</th>
<th>Date déploiement</th>
<th>Date Création du Tag</th>
<th>Par</th>
<th>Date ajout composant</th>
</tr>
</tfoot>
<tbody>
<?php
if(!empty($namespace)){
$Link = $ApiBaseLink."historydeployment/".$namespace;
$object = GetHTTPRequest($Link, $bearer);
if($object != FALSE){
$NombreHistoriques = sizeof($object);
if ($NombreHistoriques > 0){
for($historique = 0; $historique < $NombreHistoriques; $historique++){
$id = $object[$historique]["id"];
$servicename = $object[$historique]["servicename"];
$tagversion = $object[$historique]["tagversion"];
$datedeploiement = $object[$historique]["datedeploiement"];
$datecreationtag = $object[$historique]["datecreationtag"];
$actionby = $object[$historique]["actionby"];
$dateajout = $object[$historique]["dateajout"];
?>
<tr>
<td><span><?= $namespace ?></span></td>
<td><span><?= $servicename ?></span></td>
<td><span><?= $tagversion ?></span></td>
<td><span><?= $datedeploiement ?></span></td>
<td><span><?= $datecreationtag ?></span></td>
<td><span><?= $actionby ?></span></td>
<td><span><?= $dateajout ?></span></td>
</tr>
<?php
}
}
}else{
?>
<script>
ShowMessageNotification('error', 'Aïe ! L\'API n\'a pas répondu... ', 4000, 'top-end');
</script>
<?php
}
}else{
?>
<script>
ShowMessageNotification('error', 'Aïe ! Le NameSpace est vide... ', 4000, 'top-end');
</script>
<?php
}
?>
</tbody>
</table>
</div>
</div>
</div>
</div>
The JS.PHP file :
<script src="../../assets/vendor/jquery/dist/jquery.min.js"></script>
<script src="../../assets/vendor/bootstrap/dist/js/bootstrap.bundle.min.js"></script>
<script src="../../assets/vendor/js-cookie/js.cookie.js"></script>
<script src="../../assets/vendor/jquery.scrollbar/jquery.scrollbar.min.js"></script>
<script src="../../assets/vendor/jquery-scroll-lock/dist/jquery-scrollLock.min.js"></script>
<!-- Optional JS -->
<script src="../../assets/vendor/datatables.net/js/jquery.dataTables.min.js"></script>
<script src="../../assets/vendor/datatables.net-bs4/js/dataTables.bootstrap4.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/dataTables.buttons.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons-bs4/js/buttons.bootstrap4.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.html5.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.flash.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/buttons.print.min.js"></script>
<script src="../../assets/vendor/datatables.net-select/js/dataTables.select.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/jszip.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/pdfmake.min.js"></script>
<script src="../../assets/vendor/datatables.net-buttons/js/vfs_fonts.js"></script>
<script src="../../assets/vendor/chart.js/dist/Chart.min.js"></script>
<script src="../../assets/vendor/chart.js/dist/Chart.extension.js"></script>
<!-- Argon JS -->
<script src="../../assets/js/argon.js?v=1.2.0"></script>
Just after loading the first Ajax, the SideBar is no longer straightenable, it freezes.
It remains stuck after the second AJAX.
The problem come from this :
VM8230:2655 Uncaught TypeError: $this.select2 is not a function
at init (<anonymous>:2655:9)
at HTMLSelectElement.<anonymous> (<anonymous>:2667:4)
at Function.each (jquery.min.js:2)
at S.fn.init.each (jquery.min.js:2)
at <anonymous>:2666:11
at <anonymous>:2671:3
at b (jquery.min.js:2)
at Function.globalEval (jquery.min.js:2)
at Object.dataFilter (jquery.min.js:2)
at jquery.min.js:2
But my jquery is loaded only one time
I hope someone with experience can solve this problem, it makes me crazy really.. i don't understand why a require_once can cause this..

JQuery - increment and identification

I only have notions of JQuery and again and that's why today I need help...
I am doing some kind of online editor to create my newsletters.
On this page: http://emaildesigner.fr/test/index.html and here the js: http://emaildesigner.fr/test/_scripts/newsletter-buildertest.js
The concept is classic: we click on "Add" -> header then + insert and this adds an editable block.
for the moment there is only one block but the concept is to put several and to use them once or several times each.
The blocks are constructed this way:
<div class="sim-row" data-id="1">
<div class="sim-row-header1">
<div class="sim-row-header1-nav">
<table width="700" align="center" cellpadding="0" cellspacing="0" class="hide" bordercolor="#FFFFFF" bgcolor="#fff" style="background-color:#fff; border: 10px solid #ffffff;">
<tr>
<td class="sim-row-header1-nav-logo sim-row-edit sim-row-header1-slider-left-link" data-type="image"><img src="http://static3.qcnscruise.com/images/newsletters/fr/2017-12-20-test/art/pdt01.jpg" alt="" width="700" /></td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td class="sim-row-header1-slider-left-link"><span style="color:#555759; font:bold 20px arial; margin:0; text-align:left;" class="texte1">TEXTE</span></td>
</tr>
</table>
<!--[if !mso]><!-->
<div class="ShowMobile" style="font-size:0;max-height:0;overflow:hidden;display:none; background-color:#FFF;">
<table border="0" cellspacing="0" cellpadding="0" align="center" width="100%">
<tr>
<td><img src="http://static3.qcnscruise.com/images/newsletters/fr/2017-12-20-test/art/_pdt01.jpg" width="100%" border="0" style="display:block; background-color:#ffcecb; font:bold 14px arial; color:#000000; text-align:center;" alt="" /></td>
</tr>
<tr>
<td style="height:10px;"></td>
</tr>
<tr>
<td class="sim-row-header1-slider-left-link"><span style="color:#555759; font:bold 20px arial; margin:0; text-align:left;" class="texte1">TEXTE</span></td>
</tr>
</table></div>
</div>
</div>
</div>
with the #media screen, I display either a mobile version or a PC version.
I need the publisher to update at the same time the PC code and mobile code (because the mobile code is hidden and it will do everything in duplicate ... since the resolution is too large).
in general, my blocks consist of 1 to 3 images, 1 to 6 texts and 1 to 3 links
I explain my problem to you :
currently when we click on "Add" -> header then + insert and this adds an editable block.
this block is composed of an image + link and a text + link
when I update the text (I put the code js only on the block text) it updates the part pc and the moving part but if I redo: "Add" -> header then + insert and well it me put the text of the block preceding what is logical.
$(document).on('keyup','#inputtexte1',function(){
var txt = $(this).val();
$('.texte1').text(txt);
});
So I think the solution would be to be able to identify each of the blocks and each of the parts to update in the same block and that the publisher only updates the mobile parts and pc of the block concerned (for the texts, the links, and images).
I can be found a beginning of track .... after still, it is necessary that I manage to adapt it ...
var count=1;
$("#add").click(function(){
var html="<div id='bloc"+count+"'><input type='text'></input></div>";
$("#newBloc").append(html);
count++;
});
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<button id="add">Add Addresses</button>
<div id="newBloc"></div>
</body>
</html>
I hope to have been clear.
Can you help me?
Sorry for my bad English but I'm french
thank you in advance

#ZeroCool I was try to help you and make a Example for your solution Live link for example I hop you get the concept for this issue.
Add a Parent Id and onClick get parentId Then keyup call bay this parentId with your class name. Like ..
After set a parent id ...
// Global veritable dicelear
let userId = '';
$(document).on('click', '.edit', function() {
userId = '#'+ $(this).closest('ul').attr('id') + ' .userName'; //use #parentId
$('#edit-from').modal('show') // Open your edit from ...
});
$( "#memberNameGet" ).keyup(function(){
$(userId).text($(this).val());
});
let Id=1;
let userId = '';
$("#add").click(function(){
let userName = $('#newUserName').val()
let html='<ul id="user'+Id+'">'+
'<li><span class="userName">'+userName+'</span>'+
'Edit '+
'</ul> </li>';
$("#newBloc").append(html);
Id++;
$('#newUserName').val('')
});
$(document).on('click', '.edit_user', function() {
userId = '#'+ $(this).closest('ul').attr('id') + ' .userName';
$('#myModal').modal('show')
// console.log(userId);
});
$( "#memberNameGet" ).keyup(function(){
// alert(userId);
$(userId).text($(this).val());
});
span, a {
display: inline-block;
margin-right:15px;
}
input {
padding: 5px 15px }
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</br>
<div class="col-md-6">
<input type="text" id="newUserName">
<button id="add" class="btn btn-success"> Add Member</button>
</div>
</br></br>
<div class="col-md-5">
<div id="newBloc"></div>
</div>
<!-- Add member modal -->
<div class="modal fade " id="myModal" tabindex="-1" role="dialog" aria-labelledby="gridSystemModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Edit Member</h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label for="nameValue">Member Name</label>
<input type="text" class="form-control" id="memberNameGet" placeholder="Type Member Name ">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Updated</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

How to show pop-up on button click in JSP

I have the following page in jsp .
The code of the page is as following :
<HTML>
<HEAD>
<META http-equiv=Content-Language content=en-us>
<META http-equiv=Content-Type content="text/html; charset=windows-1252">
<style TYPE="text/css">
<!-- BODY { font-family:arial,helvetica; margin-left:5; margin-top:0}
A { color:#FF5500; text-decoration:underline}
A:hover,A:active { color:#0055FF; text-decoration:underline}
-->
</style>
<Script Language="JavaScript">
<!--
function inStrGrp(src,reg)
{
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
function check()
{
var uname=document.scan.elements[0].value
var bError=false
if (uname.length==0)
{
window.alert("Name is required.\n")
return false
}
if (uname.indexOf("\\")>=0)
bError=true
if (inStrGrp(uname,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
return true
}
-->
</Script>
<title>Enroll New Fingerprint.</title>
</HEAD>
<BODY onload="document.scan.name.focus();">
<center>
<table border="0" width="800">
<tr>
<td width="100%" colspan="3">
<p> </p>
<p><u><b>Online Demonstration</b></u></p>
<div align="center">
<table border="1" width="100%" height="260">
<tr>
<td width="20%" align="center" rowspan="2">
<p> </p>
<p><font color="#0055FF">Enroll</font></p>
<p>Logon</p>
<p> </p>
</td>
<td width="80%" height="30">
<b><i>Enroll Finger</i></b>
</td>
</tr>
<tr>
<td width="80%">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<form name="scan" method="POST" action="enroll.jsp" onsubmit="return check()">
<p>Please input your name: <input type="text" name="name" size="20"> </p>
<p>If you want to enroll 2 fingers, please check the box. <input type="checkbox" name="chk2Finger" value="2"> </p>
<p>
<input type="submit" value=" Enroll " name="btnEnroll"></p>
</form>
</td>
</tr>
</table>
</div>
<p> </p>
</td>
</tr>
<tr>
<td width="100%" colspan="3">
<p align="center"><small>Copyright © 2004 Futronic
Technology Company Limited. All Rights Reserved.</small></td>
</tr>
</table>
</center>
</BODY>
</HTML>
When I click on Enroill button I want to show a pop-up like as following with an image source tag .
How can I do this on Jsp ? Any advice is of great help .

Here is code snippet using bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Online Demonstration</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<div class="panel panel-default">
<div class="panel-heading">Online Demonstration</div>
<form name="scan" method="POST" action="enroll.asp">
<div class="panel-body">
<p>Thanks for your registration. You can enroll two fingers for the name you registered.</p>
<div class="row">
<div class="form-group">
<label class="col-md-5">Please input your name:</label>
<div class="col-md-5">
<input type="text" class="form-control" id="UserName"/>
</div>
</div>
</div>
<div class="row">
<div class="form-group">
<label class="col-md-5">If you want to enroll 2 fingers, please check the box.</label>
<div class="col-md-5">
<input type="checkbox" name="chk2Finger" value="2">
</div>
</div>
</div>
<input class="btn btn-default" type="submit" value="Submit">
</div>
</form>
</div>
</div>
<!-- Modal code goes here-->
<div class="modal fade" tabindex="-1" role="dialog" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<div class="container">
<div class=row>
<img src="" class="img-thumbnail col-lg-2">
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
<!-- /.modal -->
<script type="text/javascript">
function inStrGrp(src,reg){
var regex=new RegExp("[" + reg + "]","i");
return regex.test(src);
}
$(document).ready(function(){
$('input[type="submit"]').click(function (e) {
e.preventDefault();
var userName = document.getElementById('UserName').value;
var bError=false
if (userName.length==0)
{
window.alert("Name is required.\n")
return false
}
if (userName.indexOf("\\")>=0)
bError=true
if (inStrGrp(userName,'/.:*?"<>| '))
bError=true
if (bError)
{
window.alert('User name can not contain the following characters:\n \\/. :*?"<>|\n')
return false
}
else
$('#myModal').modal('show');
return true
});
});
</script>
</body>
</html>
Hope it will help.Thanks

With pure its not possible to show pop up and show image on that pop up.You can do it with jquery UI dialog .
And it will be great if you use bootstrap framework which have modal where you can insert anything you want.

Create a reusable modal using JQuery

I know writing an IF-ELSEIF-ELSE statement in the loop below would work, however I want to avoid having to write multiple modals. Instead I am looking for a JQuery modal to pop up when the image icon (basically a info image) is clicked. I want to be able to pass in the error into the function, which will then display in the modal.
Example:
Say I have a 400 Error and 500 Error, when I click the info icon, the definition should appear.
CODE BELOW:
index.gsp
<html>
<%-- Some code (saving space for body) --%>
<body>
<div id="content">
<div id="content-header">
<h1>Error Checking</h1>
</div> <!-- #content-header -->
<div id="content-container">
<div class="portlet">
<div class="portlet-content">
<div class="table-responsive">
<table
class="table table-striped table-bordered table-hover table-highlight table-checkable"
data-provide="datatable"
data-display-rows="25"
data-info="true"
data-search="true"
data-length-change="true"
data-paginate="true">
<thead>
<tr>
<th data-filterable="true" data-sortable="true" data-direction="desc">User ID</th>
<th data-filterable="true" data-sortable="true" data-direction="desc">Task ID</th>
<th data-filterable="true" data-sortable="true" data-direction="desc">Error Message</th>
</tr>
</thead>
<tbody>
<g:each in="${lists}" var="list">
<tr>
<td>${list.userId}</td>
<td>${list.taskId}</td>
<td>
**%{--WANT TO PLACE MODAL CALL HERE--}%**
**<i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i>
${list.errorMsg}**
</td>
</tr>
</g:each>
</tbody>
</table>
</div> <!-- /.table-responsive -->
</div> <!-- /.portlet-content -->
</div> <!-- /.portlet -->
</div> <!-- /#content-container -->
</div> <!-- #content -->
The MODAL I want to pop up:
<div id="styledFreqLargerModal" class="modal modal-styled fade">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-title">Issue</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-tertiary" data-dismiss="modal">Close</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->

You can generate dynamic id's using your list item's id. Then you can place your modal at the place you have mentioned. The following is a code example:
<div id="styledFreqLargerModal${list.id}" class="modal modal-styled fade">
[..]
</div><!-- /.modal -->
If you are using jQuery-UI
<a class="openDialog" href="#styledFreqLargerModal${list.id}"><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>
In your javascript do:
$(document).on("click", "a.openDialog", function() {
$($(this).attr("href")).dialog();
}
If you are using bootstrap
<a data-toggle="modal" href="#styledFreqLargerModal${list.id}"><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>

Solved the problem... Used Jquery modal. This prevented me from having to create multiple modals. In the modal I have a "click" method that determines which item got clicked, then outputs that specific message. See code below.
index.gsp
<html>
<%-- Some code (saving space for body) --%>
<body>
<div id="content">
<div id="content-header">
<h1>Error Checking</h1>
</div> <!-- #content-header -->
<div id="content-container">
<div class="portlet">
<div class="portlet-content">
<div class="table-responsive">
<table
class="table table-striped table-bordered table-hover table-highlight table-checkable"
data-provide="datatable"
data-display-rows="25"
data-info="true"
data-search="true"
data-length-change="true"
data-paginate="true">
<thead>
<tr>
<th data-filterable="true" data-sortable="true" data-direction="desc">User ID</th>
<th data-filterable="true" data-sortable="true" data-direction="desc">Task ID</th>
<th data-filterable="true" data-sortable="true" data-direction="desc">Error Message</th>
</tr>
</thead>
<tbody>
<g:each in="${lists}" var="list">
<tr>
<td>${list.userId}</td>
<td>${list.taskId}</td>
<td>
<g:if test="${(list.errorMsg).contains("400")}">
<a id="modalAlert-${list.taskId}" class="modal-alert-null" ><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>
${list.errorMsg}
</g:if>
<g:elseif test="${(list.errorMsg).contains("500")}">
<a id="modalAlert-${list.taskId}" class="modal-alert-outOfBounds" ><i class="fa fa-exclamation-triangle ui-popover pull-left" style="color:#f0ad4e;"></i></a>
${list.errorMsg}
</g:elseif>
</td>
</tr>
</g:each>
</tbody>
</table>
</div> <!-- /.table-responsive -->
</div> <!-- /.portlet-content -->
</div> <!-- /.portlet -->
</div> <!-- /#content-container -->
</div> <!-- #content -->
<r:require modules="jquery"/>
<script type="text/javascript">
$(document).ready(function() {
// Null pointer exception
$(".modal-alert-null").click(function() {
modalAlert("400 error message");
});
// outOfBoundsException
$(".modal-alert-outOfBounds").click(function() {
modalAlert("500 error message");
});
});
function modalAlert(description)
{
$("body").append(buildAlertModal());
$("#alert-modal .modal-description").html(description);
$("#alert-modal").modal("show");
}
function buildAlertModal() {
return "<div id='alert-modal' class='modal modal-styled fade'>" +
" <div class='modal-dialog'>" +
" <div class='modal-content'>" +
" <div class='modal-header'>" +
" <button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>" +
" <h3 class='modal-titl'>Exception Info</h3>" +
" </div>" +
" <div class='modal-body'>" +
" <p class='modal-description'></p>" +
" </div>" +
" <div class='modal-footer'>" +
" <button type='button' class='btn btn-tertiary' data-dismiss='modal'>Close</button>" +
" </div>" +
" </div>" +
" </div>" +
"</div>";
}
function closeModalAlert() {
$("#alert-modal").modal("hide");
}
</script>