我正在制作一个假占星网站作为一个小项目，但在使用最后一个功能时遇到了一些问题。目前，用户输入他们的日期和出生地以及一些其他信息，然后点击提交按钮调用一个函数来解析日期信息，并根据他们所在的星座弹出带有不同段落的警报。这工作正常，但不是很漂亮。
相反，我宁愿提交按钮导致弹出一个模式，并且相同的段落出现在那里(同样，取决于他们将日期输入更改为什么)。
我是 HTML 和 JavaScript 的新手，所以我读过的所有“将数据传递到模态”问题的答案都只是在我的脑海中闪过，或者似乎并不适用，据我所知告诉。这是我目前拥有的 HTML。 我已经删除了一些无关的输入，这些输入实际上除了在填写之前不允许提交之外什么都不做，以及那些只是长字符串的段落:
<body>
<header>
</header>
<main>
<div id="zodiacModal" class="modal fade" tabindex="-1" role="dialog" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 id="zodiacModalTitle" class="modal-title">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Where I need the paragraph</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<form class="needs-validation" onsubmit="test(); return false;" novalidate>
<div class="form-row">
<div class="col-sm mb-3">
<label for="birthdate">Birthdate</label>
<input id="birthdate" class="form-control" type="date" value="2000-01-01" required>
</div>
</div>
<div class="form-group">
<div class="form-check">
<input id="terms" class="form-check-input" type="checkbox" value="" required>
<label class="form-check-label" for="terms">
I believe.
</label>
<div class="invalid-feedback">
You must believe before submitting.
</div>
</div>
</div>
<button class="btn btn-primary" type="submit">Submit Form</button>
</form>
</main>
<script>
function test()
{
// Declare and initialize variables with strings for each sign here
var date = document.querySelector("#birthdate").value.slice(5).split("-");
var month = parseInt(date[0], 10), day = parseInt(date[1], 10);
var signs = ["", capricorn, aquarius, pisces, aries, taurus, gemini, cancer, leo, virgo, libra, scorpio, saggitarius, capricorn];
var days = [0, 20, 19, 20, 20, 21, 21, 22, 22, 23, 23, 22, 21];
alert((day > days[month]) ? signs[month + 1] : signs[month]);
}
</script>
从文档来看，我似乎需要将提交按钮更改为如下内容:
<button type="submit" class="btn btn-primary" data-toggle="modal" data-target="#zodiacModal">
TL;DR:我想用执行相同操作的模态替换提交表单时弹出的警告(正文中有不同的段落，具体取决于输入的日期)。非常感谢任何对我在这里需要做什么的新手友好的解释。
最佳答案
由于没有通过 modal then 传递变量的方法，所以如下所示，
$(".btn").click(function() {
$(".modal-body p").text("inserted value");
$("#myModal").modal();
});<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h2>Modal Example</h2>
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>关于javascript - 如何根据日期输入将 12 个字符串之一传递到模态？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/58737398/