PROGRAMMING TUTORIAL How to Make PopUp with Javascript

The use of Javascript on the web has a very significant impact on both the client and developer sectors. Where, Javascript can be used as visual media, data transfer, and other things related to Javascript environment . In this article, we will make a response to an activity using Popup on Javascript.

There are 3 types of Popups in Javascript. Namely: Box Alert , Confirm Box , and Prompt Box . The use of the Alert Box is generally used when the website owner wants to provide brief information to website visitors . For the Confirm Box, it is used when the website owner wants to ask for confirmation of the actions taken by the visitor (usually applied to the data registration column). And for the Prompt Box, it is used when the website owner wants the visitors to respond to an action through the given text field.

Before starting, prepare a text editor (Notepad, Sublime Text, etc.) as a typing medium. To display the results, we can use a browser (Firefox, Chrome, etc.) that supports HTML file extensions.

Step:

Make a text file named index.html . In the file, add the following code:

1
2
3
4
5
6
7
8
9
<html>
<head>
  <title>NAMA WEBSITE ANDA</title>
</head>
<body>
  <script>
  </script>
</body>
</html>

In the <body> section, add the following code:

1
<button onclick="runPopup()"></button>

Later the contents of the <body> section will be as follows:

1
2
3
4
5
<body>
  <button onclick="runPopup()">Click Me</button>
  <script>
  </script>
</body>

The existence of the <button> code will affect the response of each popup we will use.

A. Popup Alert

To display the Alert Box popup type , in the <script> section, add the following code:

1
2
3
function runPopup(){
window.alert("TULISKAN PESAN ANDA DI SINI");
};

Later, the contents in the <script> and <body> sections will be as follows:

1
2
3
4
5
6
7
8
<body>
  <button onclick="runPopup()">Click Me</button>
  <script>  
    function runPopup(){
    window.alert("TULISKAN PESAN ANDA DI SINI");
    };
  </script>
</body>

On the website run, when the user presses the button that has been provided, a popup will appear automatically, containing the text that we have previously entered.

B. Popup Confirm

To display the Confirm Box type popup , in the <script> section, add the following code:

1
2
3
4
5
6
7
8
9
10
11
function runPopup(){
 if(window.confirm("TULISKAN PESAN ANDA DI SINI"))
 {
 window.alert("Anda Baru Saja Menekan Ok!");
 }
 else
 {
 window.alert("Anda Baru Saja Menekan Cancel!");
 }
 };
};

Later, the contents in the <script> and <body> sections will be as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
  <button onclick="runPopup()">Click Me</button>
  <script>  
     if(window.confirm("TULISKAN PESAN ANDA DI SINI"))
     {
       window.alert("Anda Baru Saja Menekan Ok!");
     }
     else
     {
       window.alert("Anda Baru Saja Menekan Cancel!");
     }
     }; 
  </script>
</body>

In the code above , the popup will automatically ask for confirmation from the user. If the user answers yes / gives a positive response, then the next response is a popup containing information that the user responds positively. Vice versa. We can use 2 or more popups in one form of response.

C. Prompt Popup

To display the Prompt type popup , in the <script> section, add the following code:

1
2
3
4
5
6
7
8
9
10
11
12
function runPopup(){
 var respond = prompt("Masukkan Nama Anda: ");
 if(respond != "")
 {
 window.alert("Hai, " + respond + "!");
 }
 else
 {
 window.alert("Pengguna Tidak Memasukkan Kalimat Apapun");
 }
 };
};

Later, the contents in the <script> and <body> sections will be as follows:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<body>
  <button onclick="runPopup()">Click Me</button>
  <script>  
    function runPopup(){
    var respond = prompt("Masukkan Nama Anda: ");
    if(respond != "")
    {
      window.alert("Hai, " + respond + "!");
    }
    else
    {
      window.alert("Pengguna Tidak Memasukkan Kalimat Apapun");
    }
    };
  </script>
</body>

In the code above, we request visitor responses through the provided text fields. If a visitor gives a text response, the results will be displayed. If not, there will be information about related matters.

If all instances of applying popups are successfully run, then the popup is ready to be used on your website .

Note : Popups are not only for displaying results to visitor responses. Popups can also retrieve the results of the response, as well as send it through related media in accordance with the wishes of the website owner .

That's the tutorial on how to make a Popup with Javascript. May be useful.

Tutorial

نموذج الاتصال

PROGRAMMING TUTORIAL How to Make PopUp with Javascript

Related

نموذج الاتصال