Bootstrap’s JavaScript modal is a child form that overlays the parent form. Usually, the purpose is to display a separate piece of content that can have some interaction without leaving the parent form.
Subforms can customize content and provide functions such as information display and interaction.
01-A simple, basic modal box sample code
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<!--Introducing Bootstrap style sheet files-->
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<!--Introduce jQuery framework file-->
<script src="jquery-3.5.1.slim.js"></script>
<!--Introducing Bootstrap script files-->
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body>
<h3 align="center" >Define modal box<h3>
<a href="#myModal" class="btn btn-default" data-toggle="modal">Click here to open the modal box</a>
<div id="myModal" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<h3>Modal box</h3>
<p>This is the content of the pop-up modal box</p>
</div>
</div>
</div>
</body>
</html>
The running effect is as follows:
02-A complete modal box sample code
A complete modal box includes three parts: header, body and footer, which are defined using the classes modal-header, modal-body and class modal-footer respectively.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>A complete modal box sample code</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">A complete modal box sample code</h3>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal">
Open modal box
</button>
<div class="modal fade" id="Modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">In early spring, Zhang Shiba of the Ministry of Water Resources was presented to the outside</h5>
<button type="button" class="close" data-dismiss="modal">
<span> ×</span>
</button>
</div>
<div class="modal-body">The light rain on Tianjie is as moist as crisp, and the color of grass looks far away but not up close. </div>
<div class="modal-body">The best thing about spring is that it beats the smoke and willows all over the imperial capital. </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">More</button>
</div>
</div>
</div>
</div>
</body>
</html>
Key code description:
①data-dismiss="modal"< in code What does /code> mean?
In Bootstrap, the data-dismiss attribute is used to specify what action is triggered when the user interacts with the element. In the code, data-dismiss="modal" is the attribute used to close the modal box (Modal).
Specifically, this attribute tells the page that when the user clicks this button, the modal with id="Modal" should be closed. This is the close button of the modal box, usually presented in the form of an “X” ( ×) icon. When the user clicks it, the modal box will be closed and no longer displayed on the page. superior. This is a convenient way to implement the closing operation of the modal box without requiring additional JavaScript code to handle the closing operation.
Note that × represents the “cross” shape.
Therefore, data-dismiss="modal" can be understood as a tag that tells the page that the click event of the button is associated with the closing operation of the modal box.
The running effect is as follows:
03-Set the modal box to be centered vertically
You can center the modal box in the vertical direction by adding the class modal-dialog-centered to the modal box.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Modal box vertically centered</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">Modal box vertically centered</h3>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal">
Open modal box
</button>
<div class="modal fade" id="Modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">In early spring, Zhang Shiba of the Ministry of Water Resources was presented to the outside</h5>
<button type="button" class="close" data-dismiss="modal">
<span> ×</span>
</button>
</div>
<div class="modal-body">The light rain on Tianjie is as moist as crisp, and the color of grass looks far away but not up close. </div>
<div class="modal-body">The best thing about spring is that it beats the smoke and willows all over the imperial capital. </div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">More</button>
</div>
</div>
</div>
</div>
</body>
</html>
The running effect is as follows:
04-Set the size of the modal box
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Set modal box size</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">Set modal box size</h3>
<!-- Large size modal box -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".example-modal-lg">Large modal</button>
<div class="modal example-modal-lg">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Large size modal box</h5>
<button type="button" class="close" data-dismiss="modal">
<span> ×</span>
</button>
</div>
<div class="modal-body"> The setting sun is ruthless and the most affectionate, urging thousands of trees to sing at dusk. </div>
<div class="modal-body"> It sounds so close but nowhere to be found, but when I find it next to it there is no sound. </div>
</div>
</div>
</div>
<!-- Small size modal box -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".example-modal-sm">Small modal box</button>
<div class="modal example-modal-sm">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Small size modal box</h5>
<button type="button" class="close" data-dismiss="modal">
<span> ×</span>
</button>
</div>
<div class="modal-body">Silver candles and autumn lights paint the screen coldly, and small fans flutter against the flowing fireflies. </div>
<div class="modal-body">The sky is as cold as water at night, and I lie down to watch Altair and Vega. </div>
</div>
</div>
</div>
</body>
</html>
The running effect is as follows:
05-Modal Box Grid
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Modal grid</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h2 align="center">Modal grid</h2>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal">
Open modal box
</button>
<div class="modal" id="Modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Modal grid</h5>
<button type="button" class="close" data-dismiss="modal">
<span> ×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col-md-4 bg-success text-white">.col-md-4</div>
<div class="col-md-4 ml-auto bg-success text-white">.col-md-4 .ml-auto</div>
</div>
<div class="row">
<div class="col-md-4 ml-md-auto bg-danger text-white">.col-md-3 .ml-md-auto</div>
<div class="col-md-4 ml-md-auto bg-danger text-white">.col-md-3 .ml-md-auto</div>
</div>
<div class="row">
<div class="col-auto mr-auto bg-warning">.col-auto .mr-auto</div>
<div class="col-auto bg-warning">.col-auto</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">More</button>
</div>
</div>
</div>
</div>
</body>
</html>
The running effect is as follows:
06-Add pop-up windows and prompts to the modal box
You can use JavaScript’s popover method to add a pop-up window to the modal box, and JavaScript’s tooltip to add a prompt to the modal box.
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Pop-ups and tooltips</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="popper.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<h3 align="center">Pop-ups and tooltips</h3>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#Modal">
Open modal box
</button>
<div class="modal" id="Modal">
<div class="modal-dialog modal-dialog-centered">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Modal box title</h5>
<button type="button" class="close" data-dismiss="modal">
<span> ×</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body">
<h5>Pop-up window</h5>
<p><a href="#" role="button" class="btn btn-secondary popover-test" title="Wangyue" data-content="Zeng Yun is born in the chest, and the bird returns to the canthus. He will be the best. , a panoramic view of the mountains and small mountains.">Old Poetry</a></p>
<h5>Tooltips</h5>
<p><a href="#" class="tooltip-test" title="Ancient Poetry One">Ancient Poetry One</a>, <a href="#" class="tooltip-test" title="Ancient Poetry Two">Ancient Poetry Two</a> and <a href="#" class="tooltip-test" title="Ancient Poetry Three">Ancient Poetry Three</a></p>
</div>
<script>
$(document).ready(function(){<!-- -->
//Find the corresponding attribute category and add pop-up windows and toolbox tips
$('.popover-test').popover();
$('.tooltip-test').tooltip();
});
</script>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Submit</button>
</div>
</div>
</div>
</div>
</body>
</html>
There is a JavaScript code in the above code. For a detailed introduction to this code, please see my other blog post, link:
https://blog.csdn.net/wenhao_ir/article/details/134029389
The running effect is as follows:
07-Add action web prompt information to the modal box
The sample code is as follows:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Add user behavior</title>
<meta name="viewport" content="width=device-width,initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="bootstrap-4.5.3-dist/css/bootstrap.css">
<script src="jquery-3.5.1.slim.js"></script>
<script src="bootstrap-4.5.3-dist/js/bootstrap.min.js"></script>
</head>
<body class="container">
<button type="button" class="btn btn-primary" data-toggle="modal" data-backdrop="false" data-keyboard="false" data-target="#Modal-test">
Open modal box
</button>
<div class="modal" id="Modal-test">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalTitle">Modal box title</h5>
<button type="button" class="close" data-dismiss="modal">
<span> ×</span>
</button>
</div>
<div class="modal-body">Modal box text</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save</button>
</div>
</div>
</div>
</div>
</body>
<script>
$(function(){<!-- -->
$("#Modal-test").on("shown.bs.modal",function(){<!-- -->
alert("Modal box display completed")
})
$("#Modal-test").on("hidden.bs.modal",function(){<!-- -->
alert("Modal box hiding completed")
})
})
</script>
</html>
The running effect is as follows:
Click “Open Modal Box” in the screenshot above, and the following prompt will appear:
Then click “OK” in the screenshot above, and a modal box will appear:
Click the “Close” button in the picture above, and the following prompt will appear:
Then click “OK” in the picture above, and the prompt and modal box will disappear.