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.

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

Create an HTML
Add CSS
Write a jQuery script
Output

1. Create an HTML

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

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.

	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>

<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>

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..!!

Create a simple Modal Popup using jQuery

1. Create an HTML

2. Add CSS

3. Write a jQuery script

4. Output

Categories

Tags