{"id":51866,"date":"2021-03-08T03:01:50","date_gmt":"2021-03-07T17:01:50","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/ITblog\/?p=51866"},"modified":"2021-03-07T13:13:05","modified_gmt":"2021-03-07T03:13:05","slug":"javascript-popup-window-alternative-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-popup-window-alternative-tutorial\/","title":{"rendered":"Javascript Popup Window Alternative Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/design_javascript_popups.php\"><img decoding=\"async\" style=\"border: 15px solid pink;\" alt=\"Javascript Popup Window Alternative Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/\/PHP\/your_javascript_popup_windows.jpg\" title=\"Javascript Popup Window Alternative Tutorial\"  style=\"float:left;\" \/><\/a><p class=\"wp-caption-text\">Javascript Popup Window Alternative Tutorial<\/p><\/div>\n<p>Javascript popup windows are a bit of a web application wooooooorrrrllllddd throwback to the early days of operating system <a target=_blank href='https:\/\/en.wikipedia.org\/wiki\/Graphical_user_interface' title='Graphical User Interface information from Wikipedia, thanks'>GUI<\/a> desktop applications, even before dialog boxes in those operating system desktop applications.  They stop the workflow of the web application, and so are considered &#8220;modal&#8221; (in operating system desktop applications, you can have &#8220;modal dialog boxes&#8221;).  They can &#8230;<\/p>\n<ul>\n<li>display information or errors &#8230; <a target=_blank title='alert' href='https:\/\/www.w3schools.com\/jsref\/met_win_alert.asp'>alert<\/a> Javascript popup window<\/li>\n<li>display information or errors and get a Yes\/No answer off the user &#8230; <a target=_blank title='confirm' href='https:\/\/www.w3schools.com\/jsref\/met_win_confirm.asp'>confirm<\/a> Javascript popup window<\/li>\n<li>display information or errors and get a textual answer off the user &#8230; <a target=_blank title='prompt' href='https:\/\/www.w3schools.com\/jsref\/met_win_prompt.asp'>prompt<\/a> Javascript popup window<\/li>\n<\/ul>\n<p>Javascript offers up methods as linked to above that handle the styling and presentation of those popup windows, but there is an alternative.  As a Javascript global var<font size=1>iable<\/font> (as shows as wording of links above) you can redefine these popup windows as another arrangement, the least nonsensical being to turn these into overlaying (ie. position: absolute) windows containing an HTML form (method=GET action=[here&#8217;sLookingAtYouKid]) and submit button(s) in readiness to navigate back with user supplied information.  Whether you take steps to make the new arrangement &#8220;modal&#8221; is up to you.   The woooorrrrllldddd&#8217;s your oyster!<\/p>\n<p>We&#8217;ve touched on this before when we discussed <a target=_blank title='Conditional Alternative to Javascript Popup Windows Tutorial' href='https:\/\/www.rjmprogramming.com.au\/ITblog\/conditional-alternative-to-javascript-popup-windows-tutorial'>Conditional Alternative to Javascript Popup Windows Tutorial<\/a>, and we are going to use the code there as a basis for a &#8220;proof of concept&#8221; meets &#8220;and over to you&#8221; web application where you can make your own alternative Javascript popup window (shall we say) &#8220;verb&#8221; arrangements.<\/p>\n<p>Feel free to try <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/design_javascript_popups.php_GETME\">design_javascript_popups.php<\/a>&#8216;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/PHP\/design_javascript_popups.php\">Javascript popup window alternatives here<\/a> &#8230; or below &#8230;<\/p>\n<p><iframe style=\"width:100%;height:2200px;\" src=\"http:\/\/www.rjmprogramming.com.au\/PHP\/design_javascript_popups.php\"><\/iframe><\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d51866' onclick='var dv=document.getElementById(\"d51866\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"https:\/\/www.rjmprogramming.com.au\/ITblog\/tag\/popup\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d51866' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Javascript popup windows are a bit of a web application wooooooorrrrllllddd throwback to the early days of operating system GUI desktop applications, even before dialog boxes in those operating system desktop applications. They stop the workflow of the web application, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/javascript-popup-window-alternative-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/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":[12,17,37],"tags":[320,3574,452,1664,3081,549,576,2780,652,2080,3573,894,932,967,968,997,1319,1891,1721,1583],"class_list":["post-51866","post","type-post","status-publish","format-standard","hentry","category-elearning","category-gui","category-tutorials","tag-desktop-application","tag-dialog-box","tag-form","tag-global","tag-global-variable","tag-gui","tag-html","tag-interactive-entry","tag-javascript","tag-modal","tag-modal-dialog-box","tag-overlay","tag-php","tag-popup","tag-popup-window","tag-programming","tag-tutorial","tag-user","tag-variable","tag-window"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51866"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=51866"}],"version-history":[{"count":15,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51866\/revisions"}],"predecessor-version":[{"id":51881,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/51866\/revisions\/51881"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=51866"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=51866"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=51866"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}