{"id":770,"date":"2017-10-14T15:28:04","date_gmt":"2017-10-14T20:28:04","guid":{"rendered":"http:\/\/bluegalaxy.info\/codewalk\/?p=770"},"modified":"2021-01-17T20:16:38","modified_gmt":"2021-01-18T01:16:38","slug":"javascript-how-to-create-alerts-and-pop-up-windows","status":"publish","type":"post","link":"https:\/\/bluegalaxy.info\/codewalk\/2017\/10\/14\/javascript-how-to-create-alerts-and-pop-up-windows\/","title":{"rendered":"JavaScript: How to create alerts and pop-up windows"},"content":{"rendered":"<p>In JavaScript, alerts can be created easily using the built-in <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">alert()<\/code> function. For this first example, an alert is placed directly inside the button tag:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;button onclick=\"alert('I am an alert box!');\"&gt;Example 1&lt;\/button&gt;<\/pre>\n<p><button class=\"btn\">Example 1<\/button><\/p>\n<p>Here is a more complete example, showing in the HTML context:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;body&gt;\n\n&lt;h2&gt;JavaScript Alert Example 1&lt;\/h2&gt;\n\n&lt;button onclick=\"alert('I am an alert box!');\"&gt;Example 1&lt;\/button&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>For this second example, the alert is placed in a function.<\/p>\n<p><button class=\"btn\">Example 2<\/button><\/p>\n<p><script><br \/>\nfunction myFunction() {<br \/>\n    alert(\"Example 2: alert inside a function.\");<br \/>\n}<br \/>\n<\/script><\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;body&gt;\n\n&lt;h2&gt;JavaScript Alert Example 2&lt;\/h2&gt;\n\n&lt;button onclick=\"myFunction()\"&gt;Example 2&lt;\/button&gt;\n\n&lt;script&gt;\nfunction myFunction() {\n    alert(\"Example 2: alert inside a function.\");\n}\n&lt;\/script&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>This third example is how to create a pop-op window with HTML content. In this case, the HTML content must be in a document saved on the website. This uses a JavaScript function called Popup that takes in the URL of the page to open, and the width and height of the pop-up window. This example shows how to launch the pop-up window with an HREF link that points to a page about Server Side Includes.<\/p>\n\n<!-- iframe plugin v.5.2 wordpress.org\/plugins\/iframe\/ -->\n<iframe loading=\"lazy\" name=\"square_canvas\" src=\"https:\/\/bluegalaxy.info\/js\/popup_window.html\" scrolling=\"no\" width=\"100%\" height=\"200\" id=\"iframe_drop_shadow\" class=\"iframe-class\" frameborder=\"0\"><\/iframe>\n\n<p>Here is the complete code:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;!DOCTYPE html&gt;\n&lt;html&gt;\n&lt;head&gt;\n  &lt;link href=\"https:\/\/fonts.googleapis.com\/css?family=Roboto\" rel=\"stylesheet\"&gt;\n&lt;style&gt;\n  body {\n      font-family: 'Roboto', sans-serif;\n      font-size: 24px;\n  }\n&lt;\/style&gt;\n&lt;\/head&gt;\n&lt;body&gt;\n\n&lt;h3&gt;JavaScript Pop-up Window&lt;\/h3&gt;\n\n&lt;A href=\"http:\/\/www.bluegalaxy.info\/webshopsolution\/ssi.htm\" target=\"_blank\"\nonClick=\"Popup('http:\/\/www.bluegalaxy.info\/webshopsolution\/ssi.htm','750','400'); return false;\"&gt;Pop-up Demo Link&lt;\/A&gt;\n\n&lt;SCRIPT LANGUAGE=\"JavaScript\"&gt;\n  function Popup(page, windowWidth, windowHeight)\n  {\n  \tOpenWin = window.open(page, \"infoWindow\",\n        \"toolbar=0, location=0, directories=0, status=1, menubar=0, scrollbars=1, resizable=1, width=\" +\n        windowWidth + \",height=\" + windowHeight + \",top=100, left=200\");\n  }\n&lt;\/SCRIPT&gt;\n\n&lt;\/body&gt;\n&lt;\/html&gt;<\/pre>\n<p>One more thing to note about this example is the pop-up window itself uses a little bit of JavaScript to provide a &#8220;Close Window&#8221; link. For example:<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-791\" src=\"http:\/\/bluegalaxy.info\/codewalk\/wp-content\/uploads\/2017\/10\/close_window_sm.png\" alt=\"\" width=\"171\" height=\"153\" \/><\/p>\n<p>This link uses the built-in JavaScript <code class=\"EnlighterJSRAW\" data-enlighter-language=\"no-highlight\">top.close()<\/code> method. For example:<\/p>\n<pre class=\"EnlighterJSRAW\" data-enlighter-language=\"html\">&lt;a href=\"javascript:top.close()\"&gt;Close&lt;BR&gt;Window&lt;\/a&gt;<\/pre>\n<p>For more information about the JavaScript examples shown on this page see:<br \/>\n<a href=\"https:\/\/www.w3schools.com\/jsref\/met_win_alert.asp\">alert()<\/a><br \/>\n<a href=\"https:\/\/www.w3schools.com\/js\/js_popup.asp\">popup boxes<\/a><br \/>\n<a href=\"https:\/\/www.w3schools.com\/jsref\/met_win_open.asp\">window.open()<\/a><br \/>\n<a href=\"https:\/\/www.w3schools.com\/jsref\/met_win_close.asp\">close()<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>In JavaScript, alerts can be created easily using the built-in alert() function. For this first example, an alert is placed directly inside the button tag: &lt;button onclick=&#8221;alert(&#8216;I am an alert box!&#8217;);&#8221;&gt;Example 1&lt;\/button&gt; Example 1 Here is a more complete example, showing in the HTML context: &lt;!DOCTYPE html&gt; &lt;html&gt; &lt;body&gt; &lt;h2&gt;JavaScript Alert Example 1&lt;\/h2&gt; &lt;button onclick=&#8221;alert(&#8216;I &hellip; <a href=\"https:\/\/bluegalaxy.info\/codewalk\/2017\/10\/14\/javascript-how-to-create-alerts-and-pop-up-windows\/\" class=\"more-link\">Continue reading <span class=\"screen-reader-text\">JavaScript: How to create alerts and pop-up windows<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[44],"tags":[56,45,55],"class_list":["post-770","post","type-post","status-publish","format-standard","hentry","category-javascript-language","tag-alert","tag-javascript","tag-pop-up"],"_links":{"self":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/770","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/comments?post=770"}],"version-history":[{"count":20,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/770\/revisions"}],"predecessor-version":[{"id":3324,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/posts\/770\/revisions\/3324"}],"wp:attachment":[{"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/media?parent=770"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/categories?post=770"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/bluegalaxy.info\/codewalk\/wp-json\/wp\/v2\/tags?post=770"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}