Create a simple Modal Popup using jQuery

  • Post category:JavaScript
  • Reading time:8 mins read

Today, we’ll discuss how to create a simple Modal Popup using jQuery.

You may need to open a popup in a web application to show information, feedback, contact form or confirmation. Using the jQuery library we can easily implement the custom popup. A popup window opens without interacting with current web page elements.

Checkout more articles on JavaScript

Demo Example

Here, you will see how to create a custom popup modal using jQuery and CSS.

Output - Create a simple Modal Popup using jQuery - Code Premix
Output – Create a simple Modal Popup using jQuery – Code Premix

Steps to create Popup modal using jQuery

  1. Create an HTML
  2. Add CSS
  3. Write a jQuery script
  4. Output

1. Create an HTML

First, we will create an index.html file and paste the following HTML code that creates modal popup.

index.html
<!DOCTYPE html>
<html>

<head>
  <title>Create a simple Modal Popup using jQuery - Code Premix</title>
</head>

<body>
  <h3>Create a simple Modal Popup using jQuery - <a href="https://codepremix.com/" target="_blank" rel="noopener noreferrer">Code Premix</a></h3>
  <a class="openBtn" href="javascript:void(0)">Click to open Popup</a>

  <div class="popup">
    <div class="popup-content">
      <h2>Popup Title</h2>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
        laborum.</p>
      <a class="closeBtn" href="javascript:void(0)">x</a>
    </div>
  </div>
</body>

</html>

2. Add CSS

Now, we need to style the popup so that we will add the following CSS in the index.html file before the closing head (</head>) tag.

<style type="text/css">
body {
    font-family: Helvetica, Arial, sans-serif;
    text-align: center;
}

p {
    font-size: 16px;
    line-height: 26px;
    letter-spacing: 0.5px;
    color: #4f4343;
    margin-bottom: 0;
}

/* Popup open button */
.openBtn {
    color: #FFF;
    background: #269faf;
    padding: 10px;
    text-decoration: none;
    border: 1px solid #269faf;
    border-radius: 3px;
}

.openBtn:hover {
    background: #35c7db;
}

.popup {
    position: fixed;
    top: 0px;
    left: 0px;
    background: rgba(0, 0, 0, 0.58);
    width: 100%;
    height: 100%;
    display: none;
    text-align: left;
}

/* Popup inner div */
.popup-content {
    width: 600px;
    margin: 0 auto;
    padding: 40px;
    margin-top: 100px;
    border-radius: 3px;
    background: #fff;
    position: relative;
}

.popup-content h2 {
    margin-top: 0;
}

/* Popup close button */
.closeBtn {
    position: absolute;
    top: 5px;
    right: 12px;
    font-size: 17px;
    color: #7c7575;
    text-decoration: none;
}
</style>

3. Write a jQuery script

We have to add the following jQuery library in the head section of the page.

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>

Finally, we will write a jQuery script to trigger the action whenever users click to open/close a popup window.

Add the following script in the index.html file before the closing body (</body>) tag.

<script type="text/javascript">
  $(document).ready(function () {

    // Open Popup
    $('.openBtn').on('click', function () {
      $('.popup').fadeIn(300);
    });

    // Close Popup
    $('.closeBtn').on('click', function () {
      $('.popup').fadeOut(300);
    });

    // Close Popup when Click outside
    $('.popup').on('click', function () {
      $('.popup').fadeOut(300);
    }).children().click(function () {
      return false;
    });

  });
</script>

4. Output

Let’s combine all code together and see how it looks.

index.html
<!DOCTYPE html>
<html>

<head>
	<title>Create a simple Modal Popup using jQuery - Code Premix</title>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
	<style type="text/css">
		body {
			font-family: Helvetica, Arial, sans-serif;
			text-align: center;
		}

		p {
			font-size: 16px;
			line-height: 26px;
			letter-spacing: 0.5px;
			color: #4f4343;
			margin-bottom: 0;
		}

		/* Popup open button */
		.openBtn {
			color: #FFF;
			background: #269faf;
			padding: 10px;
			text-decoration: none;
			border: 1px solid #269faf;
			border-radius: 3px;
		}

		.openBtn:hover {
			background: #35c7db;
		}

		.popup {
			position: fixed;
			top: 0px;
			left: 0px;
			background: rgba(0, 0, 0, 0.58);
			width: 100%;
			height: 100%;
			display: none;
			text-align: left;
		}

		/* Popup inner div */
		.popup-content {
			width: 600px;
			margin: 0 auto;
			padding: 40px;
			margin-top: 100px;
			border-radius: 3px;
			background: #fff;
			position: relative;
		}

		.popup-content h2 {
			margin-top: 0;
		}

		/* Popup close button */
		.closeBtn {
			position: absolute;
			top: 5px;
			right: 12px;
			font-size: 17px;
			color: #7c7575;
			text-decoration: none;
		}
	</style>
</head>

<body>
	<h3>Create a simple Modal Popup using jQuery - <a href="https://codepremix.com/" target="_blank"
			rel="noopener noreferrer">Code Premix</a></h3>
	<a class="openBtn" href="javascript:void(0)">Click to open Popup</a>

	<div class="popup">
		<div class="popup-content">
			<h2>Popup Title</h2>
			<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
				dolore
				magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
				commodo
				consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
				pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim
				id est
				laborum.</p>
			<a class="closeBtn" href="javascript:void(0)">x</a>
		</div>
	</div>

	<script type="text/javascript">
		$(document).ready(function () {

			// Open Popup
			$('.openBtn').on('click', function () {
				$('.popup').fadeIn(300);
			});

			// Close Popup
			$('.closeBtn').on('click', function () {
				$('.popup').fadeOut(300);
			});

			// Close Popup when Click outside
			$('.popup').on('click', function () {
				$('.popup').fadeOut(300);
			}).children().click(function () {
				return false;
			});

		});
	</script>

</body>

</html>

Run the project and check the output in the browser.

I hope you found this post to be informative.
Thank you for reading. Happy Coding..!!

Tags: ,

Leave a Reply