Bootstrap modal popup design after mail sent

Hello, welcome to therichpost.com. In this post, I will tell you How to create Bootstrap modal popup design after mail sent? Bootstrap is the most popular front-end framework.
The popup design, which I will make in this post, can be used after send mail or data inserted successfully or any other success.

Now In this post, i am opening popup on page load.

Here is the pop-up design image:

Here is the complete working and testing code and you can paste this code in your html file:

<!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.3.7/css/bootstrap.min.css”>
<script src=”https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js”></script>
<script src=”https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js”></script>
<script>
$(document).ready(function()
{
$(‘#myModal’).modal(‘show’);
});
</script>
<style>
#myModal svg {
width: 40px;
display: block;
margin: 15px auto 15px;
}
#myModal .path {
stroke-dasharray: 1000;
stroke-dashoffset: 0;
}
#myModal .path.circle {
-webkit-animation: dash 0.9s ease-in-out;
animation: dash 0.9s ease-in-out;
}
#myModal .path.line {
stroke-dashoffset: 1000;
-webkit-animation: dash 0.9s 0.35s ease-in-out forwards;
animation: dash 0.9s 0.35s ease-in-out forwards;
}
#myModal .path.check {
stroke-dashoffset: -100;
-webkit-animation: dash-check 0.9s 0.35s ease-in-out forwards;
animation: dash-check 0.9s 0.35s ease-in-out forwards;
}
p{color:green;}
@-webkit-keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
@keyframes dash {
0% {
stroke-dashoffset: 1000;
}
100% {
stroke-dashoffset: 0;
}
}
@-webkit-keyframes dash-check {
0% {
stroke-dashoffset: -100;
}
100% {
stroke-dashoffset: 900;
}
}
@keyframes dash-check {
0% {
stroke-dashoffset: -100;
}
100% {
stroke-dashoffset: 900;
}
}
</style>
</head>
<body>
<div id=”myModal” class=”modal fade” role=”dialog”>
<div class=”modal-dialog modal-sm”>
<!– Modal content–>
<div class=”modal-content”>
<div class=”modal-body”>
<button type=”button” class=”close” data-dismiss=”modal”>×</button>
<svg version=”1.1″ xmlns=”http://www.w3.org/2000/svg” viewBox=”0 0 130.2 130.2″>
<circle class=”path circle” fill=”none” stroke=”#73AF55″ stroke-width=”6″ stroke-miterlimit=”10″ cx=”65.1″ cy=”65.1″ r=”62.1″/>
<polyline class=”path check” fill=”none” stroke=”#73AF55″ stroke-width=”6″ stroke-linecap=”round” stroke-miterlimit=”10″ points=”100.2,40.2 51.5,88.8 29.8,67.5 “/>
</svg>
<p class=”text-center”>Thank you!!</p>
</div>

</div>
</div>
</div>
</body>
</html>