added modal image on edit-kyc
This commit is contained in:
gelonspr
parent
27197918b6
commit
fd058edfd0
|
|
@ -1,80 +1,157 @@
|
|||
|
||||
body {
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
}
|
||||
body {
|
||||
justify-content: space-between;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
h1 {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.mainContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 10rem;
|
||||
padding-right: 10rem;
|
||||
}
|
||||
.mainContainer {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
padding-left: 10rem;
|
||||
padding-right: 10rem;
|
||||
}
|
||||
|
||||
.section {
|
||||
width: 45%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
.section {
|
||||
width: 45%;
|
||||
padding: 20px;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.section h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.section h2 {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-container {
|
||||
margin-bottom: 20px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
.form-container {
|
||||
margin-bottom: 20px;
|
||||
padding-top: 0px;
|
||||
}
|
||||
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
form {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
box-sizing: border-box;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.image-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
.image-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
img {
|
||||
width: 48%;
|
||||
height: auto;
|
||||
max-height: 200px;
|
||||
object-fit: cover;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
img {
|
||||
width: 48%;
|
||||
height: auto;
|
||||
max-height: 200px;
|
||||
object-fit: cover;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.checkboxFormContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.checkboxFormContainer {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.checkbox-container {
|
||||
margin-bottom: 10px;
|
||||
/* Adjust the margin as needed */
|
||||
}
|
||||
.checkbox-container {
|
||||
margin-bottom: 10px;
|
||||
/* Adjust the margin as needed */
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.checkbox-label {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
.kycImg , .selfieImg{
|
||||
border-radius: 5px;
|
||||
cursor: pointer;
|
||||
transition: 0.3s;
|
||||
|
||||
}
|
||||
|
||||
.kycImg:hover , .selfieImg:hover{
|
||||
box-shadow: 5px 10px 5px lightblue;
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1;
|
||||
padding-top: 100px;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
background-color: rgb(0,0,0);
|
||||
background-color: rgba(0,0,0,0.9);
|
||||
}
|
||||
|
||||
|
||||
.modal-content {
|
||||
margin: auto;
|
||||
display: block;
|
||||
width: 80%;
|
||||
height: auto;
|
||||
max-width: 700px;
|
||||
}
|
||||
|
||||
|
||||
.modal-content, #caption {
|
||||
-webkit-animation-name: zoom;
|
||||
-webkit-animation-duration: 0.6s;
|
||||
animation-name: zoom;
|
||||
animation-duration: 0.6s;
|
||||
}
|
||||
|
||||
@-webkit-keyframes zoom {
|
||||
from {-webkit-transform:scale(0)}
|
||||
to {-webkit-transform:scale(1)}
|
||||
}
|
||||
|
||||
@keyframes zoom {
|
||||
from {transform:scale(0)}
|
||||
to {transform:scale(1)}
|
||||
}
|
||||
|
||||
|
||||
.close {
|
||||
position: absolute;
|
||||
top: 15px;
|
||||
right: 35px;
|
||||
color: #f1f1f1;
|
||||
font-size: 40px;
|
||||
font-weight: bold;
|
||||
transition: 0.3s;
|
||||
}
|
||||
|
||||
.close:hover,
|
||||
.close:focus {
|
||||
color: #bbb;
|
||||
text-decoration: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
@media only screen and (max-width: 700px){
|
||||
.modal-content {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
|
@ -6,6 +6,8 @@
|
|||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<link rel="stylesheet" href="edit-kyc.css">
|
||||
|
||||
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
|
@ -32,12 +34,17 @@
|
|||
<?php
|
||||
// Display selfie image
|
||||
if (!empty($array['selfie'])) {
|
||||
echo '<img src="' . $array['selfie'] . '" alt="Selfie Image">';
|
||||
echo '<img src="' . $array['selfie'] . '" alt="Selfie Image" id="kycImg" class="selfieImg" onclick="trigger(\'kycImg\', \'Selfie Image\');">';
|
||||
} else {
|
||||
echo '<p>No selfie available.</p>';
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div id="myModal" class="modal">
|
||||
<span class="close" onclick="closeModal()">×</span>
|
||||
<img class="modal-content" id="img01" style="max-width: 100%; max-height: 80vh; width: auto; height: auto; margin: auto; display: block;">
|
||||
|
||||
</div>
|
||||
<h3>User Information</h3>
|
||||
<div class="form-container">
|
||||
<fieldset disabled>
|
||||
|
|
@ -69,13 +76,19 @@
|
|||
<?php
|
||||
if (!empty($array['images'])) {
|
||||
foreach ($array['images'] as $image) {
|
||||
echo '<img src="' . $image['link'] . '" alt="KYC Image">';
|
||||
|
||||
$img = $image['link'] ;
|
||||
echo '<img src="' . $img . '" alt="KYC Image" id="'. $img . '" class="kycImg" onclick="trigger(\''. $img . '\', \'KYC Image\');">';
|
||||
}
|
||||
} else {
|
||||
echo '<p>No images available.</p>';
|
||||
}
|
||||
?>
|
||||
</div>
|
||||
<div id="myModal" class="modal">
|
||||
<span class="close">×</span>
|
||||
<img class="modal-content" id="img01">
|
||||
</div>
|
||||
<h3>KYC Information</h3>
|
||||
<div class="form-container">
|
||||
<form>
|
||||
|
|
@ -136,7 +149,7 @@
|
|||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
<script type="text/javascript">
|
||||
function handleCheckboxChange() {
|
||||
// Check the status of checkboxes and enable/disable the "Accept" button
|
||||
var areAllChecked = document.querySelectorAll('#checkboxForm input[type="checkbox"]:checked').length === 4;
|
||||
|
|
@ -178,6 +191,25 @@
|
|||
alert("Please provide a valid reason for rejection.");
|
||||
}
|
||||
}
|
||||
|
||||
var captionText = document.getElementById("captionText");
|
||||
|
||||
function trigger(var1, caption) {
|
||||
var modal = document.getElementById("myModal");
|
||||
var modalImg = document.getElementById("img01");
|
||||
|
||||
modal.style.display = "block";
|
||||
modalImg.src = document.getElementById(var1).src;
|
||||
captionText.innerHTML = caption;
|
||||
}
|
||||
|
||||
var span = document.getElementsByClassName("close")[0];
|
||||
|
||||
|
||||
function closeModal() {
|
||||
var modal = document.getElementById("myModal");
|
||||
modal.style.display = "none";
|
||||
}
|
||||
</script>
|
||||
<div class="modal fade" id="rejectModal" tabindex="-1" role="dialog" aria-labelledby="rejectModalLabel" aria-hidden="true">
|
||||
<div class="modal-dialog" role="document">
|
||||
|
|
|
|||
Loading…
Reference in New Issue