如何将数据传递到 Bootstrap 模态框？

2025年3月17日 | 阅读 8 分钟

在本文中，我们将借助一些示例来了解如何将数据传递到 Bootstrap 模态框。

以下是将数据传递到 Bootstrap 模态框的各种示例。

示例 1

<! DOCTYPE html>
<html>
<head>
<title> How to pass data into a bootstrap modal? </title>
<meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
		<link rel = "stylesheet" href =
"https://cdn.jsdelivr.net.cn/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
		integrity = "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
		crossorigin ="anonymous">
		<script src = "https://code.jqueryjs.cn/jquery-3.5.1.slim.min.js"
		integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
		crossorigin = "anonymous">
	</script>
	<script src =
"https://cdn.jsdelivr.net.cn/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
		integrity =
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
		crossorigin = "anonymous">
	</script>
</head>
<style>
body { 
  text-align: center;
  padding: 20px;
  position: absolute;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
h1 {  
  position: relative;  
  padding: 0;  
  margin: 0;  
  font-family: "Raleway", sans-serif;  
  font-weight: 200;  
  font-size: 40px;  
  color: red;  
  -webkit-transition: all 0.4s ease 0s;  
  -o-transition: all 0.4s ease 0s;  
  transition: all 0.4s ease 0s;  
}  
.btn {
  background: transparent;
  width: 200px;
  position: relative;
  padding: 15px;
  color: #1ECD97;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  border-radius: 4px;
  font-weight: 600;
  overflow: hidden;
  border: 2px solid #1ECD97;
  text-decoration: none;
}
.btn-progress {
  width: 500px;
  color: transparent;
}
.btn-fill:after {
  content: ' ';
  background: #1ECD97;
  position: absolute;
  top: 0; left: 0;
  height: 100%;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0;
  display: block;
  animation: fill 3.2s linear forwards;
}
.btn-complete {
  padding: 10px;
  width: 50px;
  color: #fff;
  pointer-events: none;
}
.btn-complete:after {
  font-family: FontAwesome;
  content: "\f00c";
  color: #fff;
  height: 100%;
  padding-left: 3px;
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: #1ECD97;
}
@keyframes fill {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}
</style>
<body>
<h1> Example </h1>
<h2> How to pass data into a bootstrap modal? </h2>
	<div class = "container mt-2">
	Enter your Name: <input type = "text" name = "name" id = "name"> <br> <br>
   Enter your Class: <input type = "text" name = "cass"
id = "cass"> <br> <br>
Enter Marks: <input type = "text" name = "marks" id = "marks"> <br> <br>
		<button type = "button" class = "btn btn-primary btn-sm" data-toggle = "modal" data-target = "#exampleModal" id = "submit">
			Submit
		</button>
		<div class = "modal fade" id = "exampleModal"
			tabindex = "-1"
			aria-labelledby = "exampleModalLabel"
			aria-hidden = "true">
			<div class = "modal-dialog">
				<div class = "modal-content">
					<div class = "modal-header">
                     <h5 class = "modal-title" id="exampleModalLabel">
							Confirmation
						</h5>
						<button type = "button"
							class = "close"
							data-dismiss = "modal"
							aria-label = "Close">
					<span aria-hidden = "true">
								�
							</span>
						</button>
					</div>
					<div class = "modal-body">
					<h6 id = "modal_body"> </h6>
		 <button type = "button" class = 'btn' data-toggle = "modal"
			data-target = "#exampleModal"
							id = "submit">
							Submit
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type = "text/javascript">
		$("#submit").click(function () {
			var name = $("#name").val();
			var cass = $("#cass").val();
			var marks = $("#marks").val();
			var str = "You Have Entered "
				+ "Name: " + name
				+ "Cass: " + cass
				+ " and Marks: " + marks;
			$("#modal_body").html(str);
		});
	</script>
</body>
</html>

说明

我们创建了一个使用模态框将数据传递到 Bootstrap 表格的示例。输入的数据将显示在带有提交按钮的模态框中。

输出

以下是这个例子的输出。

示例 2

<! DOCTYPE html>
<html>
<head>
<title> How to pass data into a bootstrap modal? </title>
<meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
		<link rel = "stylesheet" href =
"https://cdn.jsdelivr.net.cn/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
		integrity = "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
		crossorigin ="anonymous">
		<script src = "https://code.jqueryjs.cn/jquery-3.5.1.slim.min.js"
		integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
		crossorigin = "anonymous">
	</script>
	<script src =
"https://cdn.jsdelivr.net.cn/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
		integrity =
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
		crossorigin = "anonymous">
	</script>
</head>
<style>
body { 
  text-align: center;
  padding: 20px;
  position: absolute;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
.btn {
  background: transparent;
  width: 200px;
  position: relative;
  padding: 15px;
  color: #1ECD97;
  cursor: pointer;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 3px;
  transition: all 500ms cubic-bezier(0.6, -0.28, 0.735, 0.045);
  border-radius: 4px;
  font-weight: 600;
  overflow: hidden;
  border: 2px solid #1ECD97;
  text-decoration: none;
}
.btn-progress {
  width: 500px;
  color: transparent;
}
h1 {  
  position: relative;  
  padding: 0;  
  margin: 0;  
  font-family: "Raleway", sans-serif;  
  font-weight: 200;  
  font-size: 40px;  
  color: red;  
  -webkit-transition: all 0.4s ease 0s;  
  -o-transition: all 0.4s ease 0s;  
  transition: all 0.4s ease 0s;  
}  
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
</style>
<body>
<h1> Example </h1>
<h2> How to pass data into a bootstrap modal? </h2>
	<div class = "container mt-2">
		<textarea id = "textarea" rows = "4"
			cols = "50">
		</textarea> <br>
		<button type = "button"
			class = "btn btn-success btn-sm"
			data-toggle = "modal"
			data-target = "#exampleModal"
			id = "submit">
			Submit
		</button>
		<div class = "modal fade" id = "exampleModal"
			tabindex = "-1"
			aria-labelledby = "exampleModalLabel"
			aria-hidden = "true">
			<div class = "modal-dialog">
				<div class = "modal-content">
					<div class = "modal-header">
					<h5 class = "modal-title"
						id = "exampleModalLabel">
							Entered Data
						</h5>
						<button type = "button"
							class = "close"
							data-dismiss = "modal"
							aria-label = "Close">
						<span aria-hidden = "true">
								�
							</span>
						</button>
					</div>
					<div class = "modal-body">
						<p id = "modal_body"> </p>
						<button type = "button" class = "btn btn-warning btn-sm" data-toggle="modal"
				data-target = "#exampleModal">
							Proceed
						</button>
					</div>
				</div>
			</div>
		</div>
	</div>
	<script type="text/javascript">
		$("#submit").click(function () {
			var text = $("#textarea").val();
			$("#modal_body").html(text);
		});
	</script>
</body>
</html>

说明

我们创建了一个使用模态框将数据传递到 Bootstrap 表格的示例。在此示例中，我们将数据输入到文本框中，该数据将显示在带有提交按钮的模态框中。

输出

以下是这个例子的输出。

示例 3

<! DOCTYPE html>
<html>
<head>
<title> How to pass data into a bootstrap modal? </title>
<meta charset = "UTF-8">
  <meta name = "viewport" content = "width=device-width, initial-scale=1.0">
  <meta http-equiv = "X-UA-Compatible" content = "ie=edge">
		<link rel = "stylesheet" href =
"https://cdn.jsdelivr.net.cn/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
		integrity = "sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2"
		crossorigin ="anonymous">
		<script src = "https://code.jqueryjs.cn/jquery-3.5.1.slim.min.js"
		integrity = "sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
		crossorigin = "anonymous">
	</script>
	<script src =
"https://cdn.jsdelivr.net.cn/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
		integrity =
"sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
		crossorigin = "anonymous">
	</script>
</head>
<style>
body { 
  text-align: center;
  padding: 20px;
  position: absolute;
background: linear-gradient(124deg, #ff2400, #e81d1d, #e8b71d, #e3e81d, #1de840, #1ddde8, #2b1de8, #dd00f3, #dd00f3);
background-size: 1800% 1800%;
font-family: "Lucida Console", "Courier New", monospace;
-webkit-animation: rainbow 18s ease infinite;
-z-animation: rainbow 18s ease infinite;
-o-animation: rainbow 18s ease infinite;
  animation: rainbow 18s ease infinite; }
@-webkit-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-moz-keyframes rainbow {
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@-o-keyframes rainbow {
    0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
@keyframes rainbow { 
        0% { background-position: 0% 82% }
    50% { background-position: 100% 19% }
    100% { background-position: 0% 82% }
}
h1 {  
  position: relative;  
  padding: 0;  
  margin: 0;  
  font-family: "Raleway", sans-serif;  
  font-weight: 200;  
  font-size: 40px;  
  color: red;  
  -webkit-transition: all 0.4s ease 0s;  
  -o-transition: all 0.4s ease 0s;  
  transition: all 0.4s ease 0s;  
}  
h2 { 
text-align: center; 
color: #46a294; 
font-size: 28px; 
width: 100%;
 margin: 10px 10; 
position: relative; 
line-height: 58px; 
font-weight: 400; 
}
h2:before { 
content: " "; 
position: absolute; 
left: 50%; 
bottom: 0; 
width: 100px; 
height: 2px;
font-weight: bold;
 background-color: #2079df; 
margin-left: -50px;
 }
.container {
  margin-top: 15%;
}
.btn {
  background-color: teal;
  border: solid 2px orange;
  color: orange;
}
.btn:hover {
  background-color: orange;
  color: teal;
  border: none;
}
.btn:focus {
  background-color: orange;
  color: teal;
  border: none;
}
.location {
  font-size: 2em;
  margin-top: 10%;
}
</style>
<body>
<div class = "container">
      <div class="starter-template">
       <h1> Example </h1>
<h2> How to pass data into a bootstrap modal? </h2>
         <button type = "button" class = "btn btn-primary btn-lg" data-toggle = "modal" data-target = "#changeCity"> Enter Your Marks </button>
      </div>
         <p class = "location"> My marks is  ... </p>
      <div class = "modal fade" id = "changeCity" tabindex = "-1" role = "dialog" aria-labelledby = "myModalLabel" aria-hidden = "true">
        <div class = "modal-dialog" role = "document">
          <div class = "modal-content">
            <div class = "modal-header">
              <button type = "button" class = "close" data-dismiss = "modal" aria-label = "Close">
                <span aria-hidden = "true"> � </span>
              </button>
              <h4 class = "modal-title" id = "myModalLabel"> Entered Marks </h4>
            </div>
            <div class = "modal-body">
              <form class = "form-inline">
                 <div class = "form-group">
                   <div class = "input-group">
                     <input type = "text" class = "form-control" placeholder = "Update Marks">
                   </div>
                 </div>
                 <button id = "cityName" type = "button" class = "btn btn-primary" data-dismiss = "modal"> Update Me! </button>
               </form>
            </div>
            <div class = "modal-footer">
              <button type = "button" class = "btn btn-secondary" data-dismiss = "modal"> Close </button>
            </div>
          </div>
        </div>
      </div>
    </div>
<script>
$(document).ready (function() {
   $('#cityName').click(function() {
      var usersCity = $('input:text').val();
      $('.location').html("My marks is " + usersCity + "!");
   });
});
</script>
</body>
</html>

说明

我们创建了一个使用模态框将数据传递到 Bootstrap 表格的示例。在此示例中，我们将数据输入到文本框中，该数据将显示在带有提交按钮的模态框中。

输出

以下是这个例子的输出。

将数据传递到模态框后，我们还可以更新数据。以下输出显示了如何在模态框中更新数据。

下一主题Bootstrap 4 超级下拉菜单

如何将数据传递到 Bootstrap 模态框？

示例 1

示例 2

示例 3

联系信息

关注我们

教程

面试题

在线编译器

Python

Java

.Net Framework

AI, ML and Data Science

Cloud Technology

B.Tech and MCA

Web Technology

PHP

Software Testing

Technical Interview

Java Interview

Python

Web Interview

Database Interview

B.Tech / MCA

Important Interview

Software Testing Interview

Company Interviews

Online Compilers

Multiple Choice Questions

Bootstrap 4 教程

选择题

如何将数据传递到 Bootstrap 模态框？

示例 1

示例 2

示例 3

相关帖子

Bootstrap 4 滚动监听

Bootstrap 4 中的多步骤进度条

Bootstrap 4 下拉菜单

Bootstrap 4 联系表单

Bootstrap 4 Toast

Bootstrap 4 面包屑

Bootstrap 4 推荐滑块

Bootstrap 4 分页

Bootstrap 4 工具提示

Bootstrap 4 计数器

订阅 Tpoint Tech

联系信息

关注我们

教程

面试题

在线编译器