我正在重写一些带有大量脚注的文本，格式为
<a id="par170_fn1" href="get_footnote.php?id=118">[1]</a>
脚注整理在表格中。
我对使用模式对话框或弹出窗口执行这些重构的技术流程感到有点困惑。看来 Ajax 本质上是该过程的一部分。
我对匹配动态数据的概念有些困惑。
此示例来自 Bootstrap Docs一般来说是有道理的，但我缺少允许在调用中考虑我检索到的数据的桥梁。 另外，我不想用按钮替换链接。
<div class="modal-body">
<h5>Popover in a modal</h5>
<p>This <a href="#" role="button" class="btn btn-secondary popover-test" title="Popover title" data-content="Popover body content is set in this attribute.">button</a> triggers a popover on click.</p>
<hr>
<h5>Tooltips in a modal</h5>
<p><a href="#" class="tooltip-test" title="Tooltip">This link</a> and <a href="#" class="tooltip-test" title="Tooltip">that link</a> have tooltips on hover.</p>
</div>
我希望获得一些关于如何从根本上思考这个问题的建议。
最佳答案
如果您为每个脚注创建超链接，如下所示:
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit <sub><a class="footnote" href="/footnote.php?id=123">[123]</a></sub>.</p>
然后，您可以使用 jQuery 绑定(bind)单击事件，以使用 AJAX 获取 HTML 内容，将其注入(inject) Bootstrap 模式并启动模式。
$('.footnote').on('click', function (event) {
event.preventDefault();
var $modal = $('#footnote-modal');
$.get(event.target.href, function (response) {
$modal.find('.modal-body').html(response);
$modal.modal();
});
});
下面是一个示例，我将使用 $.get 的 AJAX 调用替换为 Promise 来说明代码的工作原理。
// For example purposes only
var html = '<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptas architecto voluptatem, natus temporibus quasi labore repellat laboriosam culpa.</p>';
$('.footnote').on('click', function (event) {
event.preventDefault();
var $modal = $('#footnote-modal');
// For example purposes only
Promise.resolve(html)
.then(function (response) {
$modal.find('.modal-body').html(response);
$modal.modal();
});
// Actual code to call your PHP script
// $.get(event.target.href, function (response) {
// $modal.find('.modal-body').html(response);
// $modal.modal();
// });
});<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
</head>
<body>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit <sub><a class="footnote" href="/footnote.php?id=123">[123]</a></sub>.</p>
<p>Dolorum ducimus quos officia blanditiis expedita <sub><a class="footnote" href="/footnote.php?id=123">[456]</a></sub>.</p>
<!-- Modal -->
<div class="modal fade" id="footnote-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="exampleModalLongTitle">Footnote</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body"></div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</body>
</html>有任何问题，尽管问。
关于javascript - 如何重构 php href 链接以使用 Modal 或 popover 进行响应，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/51529031/