Profile Card with JavaScript Modal popup

An important element in website design is the user profile card. Beautiful profile card UI design makes a website aesthetic. A user profile card with modal or profile card with Javascript modal popup is used to briefly and visually display information about a person or an employee. Today we will create a javascript modal popup snippet that will animate the modal when a user clicks on the learn more button of the profile card. The video tutorial below shows how to code this snippet in detail. I would suggest you watch the video once. It will help you to understand the source code after collecting it.

Video Tutorial:

Hope you have watched the video tutorial and understood the coding technique. This JavaScript profile card is very useful if you want to briefly display the contact information or any other information of a company employee or team member to the audience. A profile card usually contains a person's name, job title or title, brief biography or description, and contact information such as email, phone number, social media profile links, etc. A profile card with JavaScript modal popup contains a quick overview of the details of the person. using this information users can communicate with each other or with a specific person.

The profile card with model popup we designed presents a person's image in an attractive way. Name, designation, and social media links are provided below the image. Below that, there is a Load More button that will pop up the model when clicked. In the model popup, the person's skill set is represented as a line graph.

You May Also Like:

Profile Card with JavaScript Modal popup [ Source Code ]:

To create this profile card with Javascript modal popup snippet, first, create an HTML and then a CSS file. You can create a separate js file after creating the HTML CSS file and put the javascript code in it or you can add it below the html file like we did. Don't forget to link the files after creating them. Copy the code from the code box below and paste it into your file. After checking the code in your browser, if you find any error, download the code from the download button below.

ADD HTML:

<!DOCTYPE html>
<html lang="en">
<!-- divinectorweb.com -->
<head>
	<meta charset="UTF-8">
	<meta content="IE=edge" http-equiv="X-UA-Compatible">
	<meta content="width=device-width, initial-scale=1.0" name="viewport">
	<title>Profile Card With Javascript Modal Popup</title>
	<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500&display=swap" rel="stylesheet">
	<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet">
	<link href="style.css" rel="stylesheet">
</head>
<body>
	<main>
		<div class="single-box">
			<div class="header-area img1"></div>
			<div class="body-area">
				<h3>Jason Willams</h3>
				<h4>Full Stack Developer</h4>
				<p class="socials"><i class="fa fa-facebook"></i> <i class="fa fa-twitter"></i> <i class="fa fa-pinterest"></i> <i class="fa fa-linkedin"></i></p><button id="modal-button">Learn More</button>
			</div>
		</div>
		<article id="modal-container">
			<section id="modal-section">
				<button id="modal-close-button">X</button>
				<h3 id="modal-title">My Skillset</h3>
				<p id="modal-content"></p>
				<div class="skill-box">
					<p>HTML</p>
					<div class="skill-area">
						<div class="skills" style="width: 90%">
							90%
						</div>
					</div>
					<p>CSS</p>
					<div class="skill-area">
						<div class="skills" style="width: 75%">
							75%
						</div>
					</div>
					<p>Javascript</p>
					<div class="skill-area">
						<div class="skills" style="width: 65%">
							65%
						</div>
					</div>
					<p>React</p>
					<div class="skill-area">
						<div class="skills" style="width: 75%">
							75%
						</div>
					</div>
				</div>
				<p></p>
			</section>
		</article>
	</main>
	<script>
	       let X = document.getElementById('modal-button');
	let modal = document.getElementById('modal-container');
	let Y = document.getElementById('modal-close-button');

	X.onclick = function() {
	 modal.style.display = "block";
	}

	Y.onclick = function() {
	 modal.style.display = "none";
	}
	</script>
</body>
</html>

ADD CSS:

body {
	padding: 0;
	margin: 0;
	background: linear-gradient(45deg, #eec267, #f25bc3);
	font-family: 'Montserrat', sans-serif;
}
main {
	width: 100%;
	height: 100vh;
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-evenly;
}
.single-box {
	flex-direction: column;
	width: 370px;
	color: #001346;
	background-color: #fff;
	align-self: center;
	box-shadow: 0 0 10px rgba(0, 0, 0, .5);
	cursor: pointer;
	border-radius: 10px;
	margin: 10px 0;
	z-index: 1;
	height: 450px;
}
.header-area.img1 {
	background-image: url(1.jpg);
}
.header-area {
	border-radius: 10px 10px 50% 50%;
	padding: 120px 30px;
	background-size: cover;
	background-position: center center;
}
.body-area {
	padding: 10px 30px;
	text-align: center;
}
.body-area h3 {
	font-size: 25px;
	margin: 20px 0 0;
}
.body-area h4 {
	color: #f05487;
	font-size: 18px;
	margin: 5px 0;
}
.body-area p i {
	padding-right: 20px;
}
/* modal css */

#modal-button {
	background: #f05487;
	border: none;
	color: #fff;
	padding: 10px 30px;
	font-size: 16px;
}
#modal-container {
	display: none;
	position: fixed;
	left: 0;
	top: 0;
	z-index: 1;
	background-color: rgba(0, 0, 0, 0.7);
	height: 100%;
	width: 100%;
}
#modal-section {
	position: relative;
	background-color: #f7f7f7;
	width: 40%;
	margin: 7% auto;
	padding: 40px;
	border-radius: 15px;
	animation: animate .5s ease-in;
}
@keyframes animate {
	from {
		top: -300px;
		opacity: 0
	}
	to {
		top: 0;
		opacity: 1
	}
}
#modal-close-button {
	float: right;
	border: none;
	background: none;
	cursor: pointer;
}
#modal-title {
	text-align: center;
}
.skill-area {
	width: 100%;
	background-color: #ddd;
}
.skills {
	text-align: right;
	padding-top: 10px;
	padding-bottom: 10px;
	color: white;
	background: #f05487;
}

To summarize, constructing a profile card with HTML CSS and Javascript is a worthwhile project, especially for those new to web development. You can create a javascript profile card by following the steps indicated in this blog post. Remember to keep exploring and extending your knowledge by producing more snippets. We recommend that you explore the other amazing creations on this website. Please share this blog's article with others if you enjoy it. Thank you for stopping by.

DOWNLOAD CODE

Video Tutorial:

Profile Card with JavaScript Modal popup [ Source Code ]:

Post a Comment

Post a Comment

About Us

Contact Form

Profile Card with JavaScript Modal popup

Video Tutorial:

Profile Card with JavaScript Modal popup [ Source Code ]:

You might like

Post a Comment

Post a Comment

Contact Form