К вашему сведению: я не использую bootstrap Модальное окно для всплывающего окна.
У меня есть таблица с кнопкой в каждой строке для отображения подробной информации во всплывающем модальном окне.
I Я прилагаю часть кода, необходимую для dashboard.html, modal.js, modal.css и modal.php.
Мне не хватает понятия jquery для добавления элемента в форму и присвоения значений возвращаемых JSON файл PHP, а затем добавьте ФОРМУ в div tag class modal-content. также CSS для всплывающего модального окна не работает при нажатии кнопки.
Также я хочу удалить предыдущий тег формы html внутри class modal-content, так как при каждом новом щелчке строки будет появляться новая форма, в которой пользователь сможет редактировать и изменять значения строки.
Вы можете получить более четкое изображение, посмотрев на скриншот ниже.
Файл dashboard.html, этот файл имеет кнопку для вызова modal.js
<div class="row">
<div class="col span-4-of-4">
<div style="overflow-x:auto;">
<table class="display_table" id='main_lead_table' style="display: none;">
<thead>
<th>#</th>
<th>Lead Id</th>
<th>Name</th>
<th>Website</th>
<th>Linkedin</th>
<th>Lead Description</th>
<th>Owner Notes</th>
<?php
if($_SESSION['Admin'] == '1'){
?>
<th>Admin Notes</th>
<th>Added By</th>
<?php
}
?>
<th>Last Contact Date</th>
<th>Next Contact Date</th>
<th>Lead Status</th>
<th>Details</th>
</thead>
<tbody id='leadTable'>
<?php
function getLeadAddedByName($id){
include('./server/connection.php');
$selectSQL = "SELECT UserName FROM `tbl_user_signup_info` WHERE User_Id = '$id' ";
$result = $conn -> query ($selectSQL);
$name = "";
while($row = mysqli_fetch_array($result)){
$name = $row['UserName'];
}
return $name;
}
include('./server/connection.php');
$selectSQL = "SELECT * FROM `tbl_main_lead_info` ORDER BY Lead_Id";
$result = $conn -> query ($selectSQL);
$i = 1;
while ($row = mysqli_fetch_array($result)) {
printf( "<tr class='content'>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td>%s</td>
<td><button id='%d' name='leadidclick' value='%d' > View </button></td>
</tr>",
$i,
$row['Lead_Id'],
$row['FirstName']." ".$row['LastName'],
$row['Website'],
$row['Linkedin'],
$row['LeadDescription'],
$row['OwnerNotes'],
$row['AdminNotes'],
getLeadAddedByName($row['LeadAddedBy'])."<br>Date/Time: ".$row['LeadAddedOn'],
date('d-m-Y', strtotime($row['LastContactDate'])),
date('d-m-Y', strtotime($row['NextContactDate'])),
$row['LeadStatus'],
$row['Lead_Id'],
$row['Lead_Id'],
);
$i = $i+1;
}
?>
</tbody>
</table>
</div>
</div>
</div>
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<span class="close">×</span>
<p>This is Modal Box</p>
</div>
</div>
Этот modal.js файл будет получать идентификатор строки при каждом новом нажатии кнопки и создавать HTML ФОРМУ для POP до модального окна с этим HTML FORM.
$(document).ready(function() {
$('[name="leadidclick"]').click(function(e){
e.preventDefault();
// var leadid = $('[name="leadidclick"]').val();
var leadid = $(this).val();
alert("You clicked Leadid: " + leadid);
$.ajax({
type: "POST",
url: './server/modal.php',
data: {
'leadid': leadid
},
success: function(data){
var result = $.parseJSON(data);
console.log(result);
console.log(result.length)
//Modal Box to POP UP HERE
$.each(result, function(key, value) {
$form = $("<form action='' method='POST'></form>").attr("id", value['Lead_Id']);
//This value assigning based on JSON Key value pair is also not working
$form.append('<label>Lead Id: </label><input type="text" name="leadid" ').attr("id", value['Lead_Id']);
$form.append('<label>Lead Name: </label><input type="text" name="leadname">').attr("value", value['FirstName']+" "+value['LastName']);
$form.append('<label>Company: </label><input type="text" name="company" ').attr("value", value['Company']);
$form.append('<input type="button" value="button">');
i = i + 1;
});
$( ".modal-content" ).append( $form );
//This change in CSS is not working
$('#myModal').css("display", "show");
}
});
});
});
Файл modal.css для отображения модального
/* The Modal (background) */
.modal {
display: none; /* Hidden by default */
position: fixed; /* Stay in place */
z-index: 1; /* Sit on top */
left: 0;
top: 0;
width: 100%; /* Full width */
height: 100%; /* Full height */
overflow: auto; /* Enable scroll if needed */
background-color: rgb(0,0,0); /* Fallback color */
background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
}
/* Modal Content/Box */
.modal-content {
background-color: #fefefe;
margin: 15% auto; /* 15% from the top and centered */
padding: 20px;
border: 1px solid #888;
width: 80%; /* Could be more or less, depending on screen size */
}
/* The Close Button */
.close {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
}
.close:hover,
.close:focus {
color: black;
text-decoration: none;
cursor: pointer;
}
@ Trupti Barad Я получаю эту ошибку консоли для всплывающего окна модального окна, и я не возможность открыть модальное окно (я использую модальное окно без bootstrap).
modal.js:61 Uncaught TypeError: $(...).modal is not a function
at Object.success (modal.js:61)
at c (jquery-3.4.1.min.js:2)
at Object.fireWith [as resolveWith] (jquery-3.4.1.min.js:2)
at l (jquery-3.4.1.min.js:2)
at XMLHttpRequest.<anonymous> (jquery-3.4.1.min.js:2)