Create popup message using JQuery in 2 steps

Creating popup notifications in Blogger is very easy especially using JQuery. Simply by setting the appearance time (setTimeout) and the appearance script (toggle), you can display popup messages on your blog or website. This time, I want to share how to do it with you. However, since this tutorial is a basic tutorial, you will have to use all your creativity to create a beautiful popup notification. If you just want to quickly create a notification message without doing any coding, you can use the popup message generator we provide.

What is a popup message or notification?

A popup notification is a dialog box that appears on a floating web page, and is not part of the current page. The popup notification is the same as the dialog box that appears so you can choose between OK and Cancel. Of course, not all messages appear with buttons to click. You may only want to display text messages, pictures, and so on.

Popup notifications, often referred to as toast notifications, serve as reminders or promotions or advertisements. For example, when you visit a website, you see a message pop up that the website may have content that interests you, or that they have a big discount.

Disadvantages of using popup notifications

But not all visitors like popup messages. For them the display of this message is very disturbing to them. Some search engines may not like a website or blog that has too many notification messages so that the website or blog is considered SPAM.

To minimize the risk, a popup message must be timed and the frequency of its appearance so as not to disturb blog visitors.

How to create a popup message with JQuery?

Here I show you an easy way to create a popup message but make sure that you have JQuery installed on your blog.

Create popup message <div>

You need to create a container for your popup messages so you have to create a <div> which you give a class like toast-container. This div will hold the message body you want to display. You need to set div properties like height, width, position, background color, text color, spacing (padding and margins), and others. You can use CSS to set it.

Since this div doesn't have to appear the first time visitors open your blog, it should be hidden, either by setting its position outside the browser area or by using the display:none property. Here is a basic example:

<div class="container" style="background:black;color:white;width:60%;margin:auto;padding:10px;z-index:2000;display:none;"><p>This is a popup notification.</p></div>

In the example above, we have created a <div> message with a black background, white text color, 60% width of the screen size (this will make your message responsive), margins set to the center of the screen, 10px padding distance, and hidden with display:none. We have also set z-index:2000 which will make the message appear at the very front so that it is not blocked by other elements on our blog page.

Create a timer with JQuery

After creating <div> as above, you need to set the appearance time in milliseconds. This time, we will set the popup message to appear the second second a blog page is opened (2000). In this timing code, we also need to enter the code that will bring up the popup notification that we have created.

$(document).ready(function(){ setTimeout(function(){ $(".toast-container").toggle("fold"); },2000); });

Create a function so that popup messages can disappear

A popup message must be removed or the view of visitors will be blocked and they will be more annoyed with our blog. We can put an x button inside <div> which serves to remove the popup notification. However, we're going to make it even easier; visitors just need to click on the popup message to hide it. For that, we have to add the code below after the timer function above:

$(".toast-container").click(function(){ $(".toast-container").toggle("fold"); });

Thus, the complete code of the popup message with JQuery is as follows:

$(document).ready(function(){ setTimeout(function(){ $(".toast-container").toggle("fold"); },2000); $(".toast-container").click(function(){ $(".toast-container").toggle("fold"); }); });

Very easy, right? Now, you just need to copy the HTML and JQuery code above and paste them on your blogger template or blog page. Then, see.

Now, to increase your knowledge about using JQuery to create popup notifications, then I give you a task to do. Look for a way to show popup messages only to new visitors to your blog. That way, when the same visitor visits your blog on different days, the popup message will not appear again unless they clear their browser cache.