{"id":82,"date":"2009-09-01T23:49:17","date_gmt":"2009-09-01T23:49:17","guid":{"rendered":"http:\/\/localhost\/tfcom_wp\/2009\/09\/01\/jquery-popup-window\/"},"modified":"2009-09-01T23:49:17","modified_gmt":"2009-09-01T23:49:17","slug":"jquery-popup-window","status":"publish","type":"post","link":"https:\/\/www.tech-freaks.com\/java\/code-snippets\/jquery-popup-window.html","title":{"rendered":"Jquery way to simple popup window"},"content":{"rendered":"<div style=\"text-align: left;\">One thing cool about Jquery is the ability to access an element based on class or id attribute and handle events without attaching the traditional onClick, onSubmit events on the element.<\/div>\n<div style=\"text-align: left;\">\u00a0<\/div>\n<div style=\"text-align: left;\">We examine a simple way for providing a link that will open in a popup window using Jquery.<\/div>\n<div style=\"text-align: left;\">\u00a0<\/div>\n<div style=\"text-align: left;\">Below is the code in a page. The Jquery function is added in the html page, but in real applications we may want to segregate it in a JS file.\u00a0<\/div>\n<div style=\"text-align: left;\">\n<pre class=\"language-javascript\"><code>&lt;script type=\"text\/javascript\" src=\"static\/jquery-1.3.1.js\"&gt;&lt;\/script&gt;\r\n \r\n&lt;script type=\"text\/javascript\"&gt;\r\n\t$(document).ready( function() {\r\n\t\t$(\"a.home\").click(\r\n\t\tfunction() {\r\n\t\t\tvar href= $(this).attr(\"href\");\r\n\t\t\tvar arrHref = href.split(\"|\");\r\n\t\t\twindow.open(arrHref[0], \"PopUp\", arrHref[1])\r\n\t\t\treturn false;\r\n\t\t});\r\n\t});\r\n&lt;\/script&gt;\r\n \r\n&lt;a href=\"http:\/\/www.tech-freaks.com|toolbar=0,menubar=0,width=800,height=700,scrollbars=1\"\r\nclass=\"home\"&gt;Home Page&lt;\/a&gt;<\/code><\/pre>\n<p>\u00a0<\/p><\/div>\n<div style=\"text-align: left;\">See how the href attribute is used to pass other window configuration attributes. The Jquery splits by the delimiter (|) and calls the popup function. This provides amazing configuration ability, although the function looks big compared to our traditional popup. The a href tag is clean with no onclick function which is a plus.\u00a0<\/div>\n<div style=\"text-align: left;\">\u00a0<\/div>\n<div style=\"text-align: left;\">The only downside a developer unaware of Jquery may be confused on how that href attribute is able to generate a popup window.\u00a0<\/div>\n<div style=\"text-align: left;\">\u00a0<\/div>\n","protected":false},"excerpt":{"rendered":"<p>One thing cool about Jquery is the ability to access an element based on class or id attribute and handle [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"categories":[13],"tags":[],"class_list":["post-82","post","type-post","status-publish","format-standard","hentry","category-code-snippets"],"_links":{"self":[{"href":"https:\/\/www.tech-freaks.com\/wp-json\/wp\/v2\/posts\/82","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.tech-freaks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.tech-freaks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.tech-freaks.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.tech-freaks.com\/wp-json\/wp\/v2\/comments?post=82"}],"version-history":[{"count":0,"href":"https:\/\/www.tech-freaks.com\/wp-json\/wp\/v2\/posts\/82\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.tech-freaks.com\/wp-json\/wp\/v2\/media?parent=82"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.tech-freaks.com\/wp-json\/wp\/v2\/categories?post=82"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.tech-freaks.com\/wp-json\/wp\/v2\/tags?post=82"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}