Bootstrap 4模式变化内容不起作用



我遇到了一个小问题,无法获得从HTML表读取数据并将其输入Bootstrap 4模式的模式。我已经尝试了多种方法,如下面的代码片段所示。

这只是我在学习,因为我需要能够使用ASP.Net来完成这项工作,并从数据库中填充一个表,将数据传递到Modal中,但首先需要使基本的Modal正常工作。有人能帮忙弄清楚为什么这不起作用吗。

HTML:

@{
ViewData["Title"] = "PlayTest";
}
@model ViewModel
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="~/css/site.css" type="text/css" />
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" id="bootstrap-css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h1>@ViewData["Title"]</h1>
<br />
<br />
<table>
<thead>
<tr>
<th>Name</th>
<th>Age</th>
<th>Gender</th>
<th>&nbsp;</th>
</tr>
</thead>
<tbody>
<tr>
<td class="name">John</td>
<td class="age">45</td>
<td>Male</td>
<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal" data-name="John">View</button></td>
</tr>
<tr>
<td class="name">Samantha</td>
<td class="age">32</td>
<td>Female</td>
<td><button type="button" class="btn btn-info btn-sm" data-toggle="modal" data-target="#myModal">View</button></td>
</tr>
</tbody>
</table>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog modal-dialog-scrollable modal-dialog-centered modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title">Name</h4>
<button type="button" class="close" data-dismiss="modal">&times;</button>
</div>
<div class="modal-body">
<p class="ageMessage">Age</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>

JS:

<script type="text/javascript">
$(document).ready(function () {
$('#myModal').on('show.bs.modal', function (e) {
var button = $(e.relatedTarget);
var _name = button.data('name');
var row = button.parents('tr');
//var name = row.find('.name').text();
var age = row.find('.age').text();
$(this).find('.modal-title').val(_name);
//$(this).find('.modal-title').val(name);
$(this).find('.ageMessage').val('Your age is: ' + age + '!');
})
})
</script>

它仍然打开一个Modal,只是除了硬编码的"Name"one_answers"Age"之外什么都没有显示,而不是我希望看到的表中的值。

我注意到您的JavaScript使用myModel作为ID,但您的模态具有myModal的ID。

JQuery函数将不会被调用,因为事件侦听器没有侦听您的模态。

用这个来代替$('#myModel')->$('#myModal')

相关内容

最新更新