{"id":109,"date":"2014-03-13T08:00:00","date_gmt":"2014-03-13T08:00:00","guid":{"rendered":"http:\/\/localhost\/?p=109"},"modified":"2015-12-16T19:52:03","modified_gmt":"2015-12-16T19:52:03","slug":"popup-support","status":"publish","type":"post","link":"https:\/\/ionic.io\/blog\/popup-support","title":{"rendered":"Popup Support Just Landed"},"content":{"rendered":"<div style=\"float: right; margin-right: -160px\">\n<div class=\"phone-case\">\n<p data-height=\"568\" data-theme-id=\"3572\" data-slug-hash=\"zkmhJ\" data-default-tab=\"result\" class=\"codepen\">See the Pen by <a href=\"http:\/\/codepen.io\/ionic\/pen\/zkmhJ\">Ionic<\/a> (<a href=\"http:\/\/codepen.io\/ionic\">@ionic<\/a>) on <a href=\"http:\/\/codepen.io\">CodePen<\/a>.<\/p>\n<p>  <script async=\"\" src=\"\/\/codepen.io\/assets\/embed\/ei.js\"><\/script>\n <\/div>\n<\/div>\n<p>One great thing about native SDKs is the control they give developers when it comes to common tasks like<br \/>\nprompting the user for input, or showing a modal dialog.<\/p>\n<p>Unfortunately, the browser built-ins <code>alert()<\/code>, <code>confirm()<\/code>, and <code>prompt()<\/code>, while convenient, are too limiting for<br \/>\nthose that wish to build a really custom mobile app experience.<\/p>\n<p>Based on all the requests and feedback we&#8217;ve gotten from Ionic developers, we knew more powerful popup support was important to you. You want the ability to do things like<br \/>\nprompt for a password, or have two inputs in a popup. Things that just aren&#8217;t possible with the built-in browser prompts.<\/p>\n<p>So today we are releasing the first implementation of popup (or &#8220;dialog&#8221;) support in Ionic. Check out the live demo on the right to get a feel for how it works.<\/p>\n<p>We designed the popup experience off of how they function in iOS, meaning the modals can stack and will &#8220;pop&#8221; off after the most recent one is dismissed.<\/p>\n<p>Since the native browser popups are the only functions that can block the executing Javascript that opens it, our implementation had to make it easy to asynchronously<br \/>\nreturn prompt data to your code. We do this through Angular promises.<\/p>\n<p><!--more--><\/p>\n<p>A call to prompt a user for a password looks like this with the new popup system (make sure to inject <code>$ionicPopup<\/code> into your controller):<\/p>\n<pre><code class=\"javascript\">$ionicPopup.prompt({\n  title: &#039;Enter your password&#039;,\n  inputType: &#039;password&#039;\n}).then(function(password) {\n  \/\/ You have the password now\n});\n<\/code><\/pre>\n<p>Or, you can get a little wild and use an arbitrary template that binds to your scope, and completely control the buttons in the popup:<\/p>\n<pre><code class=\"javascript\">  $scope.data = {}\n\n  $ionicPopup.show({\n    templateUrl: &#039;popup-template.html&#039;,\n    title: &#039;Enter Wi-Fi Password&#039;,\n    scope: $scope,\n    buttons: [\n      { text: &#039;Cancel&#039;, onTap: function(e) { return true; } },\n      {\n        text: &#039;&lt;b&gt;Save&lt;\/b&gt;&#039;,\n        type: &#039;button-positive&#039;,\n        onTap: function(e) {\n          return $scope.data.wifi;\n        }\n      },\n    ]\n    }).then(function(password) {\n      console.log(&#039;Got wifi password&#039;, password);\n    });\n<\/code><\/pre>\n<p>See the full <a href=\"http:\/\/codepen.io\/ionic\/pen\/zkmhJ\">Demo<\/a> for an example of how to use each type of popup we support.<\/p>\n<p>Oh, and coming soon are some really great API docs that go into detail all the features of the popup system and all of our other controllers. Expect more on that in a week or so.<\/p>\n<p>Have a great weekend!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>See the Pen by Ionic (@ionic) on CodePen. One great thing about native SDKs is the control they give developers when it comes to common tasks like prompting the user for input, or showing a modal dialog. Unfortunately, the browser built-ins alert(), confirm(), and prompt(), while convenient, are too limiting for those that wish to [&hellip;]<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"publish_to_discourse":"","publish_post_category":"","wpdc_auto_publish_overridden":"","wpdc_topic_tags":"","wpdc_pin_topic":"","wpdc_pin_until":"","discourse_post_id":"","discourse_permalink":"","wpdc_publishing_response":"","wpdc_publishing_error":"","_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[1],"tags":[3],"class_list":["post-109","post","type-post","status-publish","format-standard","hentry","category-all","tag-ionic"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v23.0 (Yoast SEO v23.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Popup Support Just Landed - Ionic Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/ionic.io\/blog\/popup-support\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Popup Support Just Landed\" \/>\n<meta property=\"og:description\" content=\"See the Pen by Ionic (@ionic) on CodePen. One great thing about native SDKs is the control they give developers when it comes to common tasks like prompting the user for input, or showing a modal dialog. Unfortunately, the browser built-ins alert(), confirm(), and prompt(), while convenient, are too limiting for those that wish to [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/ionic.io\/blog\/popup-support\" \/>\n<meta property=\"og:site_name\" content=\"Ionic Blog\" \/>\n<meta property=\"article:published_time\" content=\"2014-03-13T08:00:00+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2015-12-16T19:52:03+00:00\" \/>\n<meta name=\"author\" content=\"Max Lynch\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@maxlynch\" \/>\n<meta name=\"twitter:site\" content=\"@ionicframework\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Max Lynch\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/ionic.io\/blog\/popup-support#article\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/popup-support\"},\"author\":{\"name\":\"Max Lynch\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e\"},\"headline\":\"Popup Support Just Landed\",\"datePublished\":\"2014-03-13T08:00:00+00:00\",\"dateModified\":\"2015-12-16T19:52:03+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/ionic.io\/blog\/popup-support\"},\"wordCount\":320,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"keywords\":[\"Ionic\"],\"articleSection\":[\"All\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/ionic.io\/blog\/popup-support#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/ionic.io\/blog\/popup-support\",\"url\":\"https:\/\/ionic.io\/blog\/popup-support\",\"name\":\"Popup Support Just Landed - Ionic Blog\",\"isPartOf\":{\"@id\":\"https:\/\/ionic.io\/blog\/#website\"},\"datePublished\":\"2014-03-13T08:00:00+00:00\",\"dateModified\":\"2015-12-16T19:52:03+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/ionic.io\/blog\/popup-support#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/ionic.io\/blog\/popup-support\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/ionic.io\/blog\/popup-support#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/ionic.io\/blog\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Popup Support Just Landed\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/ionic.io\/blog\/#website\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"name\":\"ionic.io\/blog\",\"description\":\"Build amazing native and progressive web apps with the web\",\"publisher\":{\"@id\":\"https:\/\/ionic.io\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/ionic.io\/blog\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/ionic.io\/blog\/#organization\",\"name\":\"Ionic\",\"url\":\"https:\/\/ionic.io\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png\",\"width\":1920,\"height\":854,\"caption\":\"Ionic\"},\"image\":{\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/x.com\/ionicframework\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e\",\"name\":\"Max Lynch\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg\",\"contentUrl\":\"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg\",\"caption\":\"Max Lynch\"},\"description\":\"CEO\",\"sameAs\":[\"http:\/\/twitter.com\/maxlynch\",\"https:\/\/x.com\/maxlynch\"],\"url\":\"https:\/\/ionic.io\/blog\/author\/max\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Popup Support Just Landed - Ionic Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/ionic.io\/blog\/popup-support","og_locale":"en_US","og_type":"article","og_title":"Popup Support Just Landed","og_description":"See the Pen by Ionic (@ionic) on CodePen. One great thing about native SDKs is the control they give developers when it comes to common tasks like prompting the user for input, or showing a modal dialog. Unfortunately, the browser built-ins alert(), confirm(), and prompt(), while convenient, are too limiting for those that wish to [&hellip;]","og_url":"https:\/\/ionic.io\/blog\/popup-support","og_site_name":"Ionic Blog","article_published_time":"2014-03-13T08:00:00+00:00","article_modified_time":"2015-12-16T19:52:03+00:00","author":"Max Lynch","twitter_card":"summary_large_image","twitter_creator":"@maxlynch","twitter_site":"@ionicframework","twitter_misc":{"Written by":"Max Lynch","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/ionic.io\/blog\/popup-support#article","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/popup-support"},"author":{"name":"Max Lynch","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e"},"headline":"Popup Support Just Landed","datePublished":"2014-03-13T08:00:00+00:00","dateModified":"2015-12-16T19:52:03+00:00","mainEntityOfPage":{"@id":"https:\/\/ionic.io\/blog\/popup-support"},"wordCount":320,"commentCount":0,"publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"keywords":["Ionic"],"articleSection":["All"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/ionic.io\/blog\/popup-support#respond"]}]},{"@type":"WebPage","@id":"https:\/\/ionic.io\/blog\/popup-support","url":"https:\/\/ionic.io\/blog\/popup-support","name":"Popup Support Just Landed - Ionic Blog","isPartOf":{"@id":"https:\/\/ionic.io\/blog\/#website"},"datePublished":"2014-03-13T08:00:00+00:00","dateModified":"2015-12-16T19:52:03+00:00","breadcrumb":{"@id":"https:\/\/ionic.io\/blog\/popup-support#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/ionic.io\/blog\/popup-support"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/ionic.io\/blog\/popup-support#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/ionic.io\/blog"},{"@type":"ListItem","position":2,"name":"Popup Support Just Landed"}]},{"@type":"WebSite","@id":"https:\/\/ionic.io\/blog\/#website","url":"https:\/\/ionic.io\/blog\/","name":"ionic.io\/blog","description":"Build amazing native and progressive web apps with the web","publisher":{"@id":"https:\/\/ionic.io\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/ionic.io\/blog\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/ionic.io\/blog\/#organization","name":"Ionic","url":"https:\/\/ionic.io\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2020\/10\/white-on-color.png","width":1920,"height":854,"caption":"Ionic"},"image":{"@id":"https:\/\/ionic.io\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/x.com\/ionicframework"]},{"@type":"Person","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/91f360cffbd804a464b0c4a87b5c5f1e","name":"Max Lynch","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/ionic.io\/blog\/#\/schema\/person\/image\/","url":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg","contentUrl":"https:\/\/ionic.io\/blog\/wp-content\/uploads\/2018\/05\/max-avatar-150x150.jpg","caption":"Max Lynch"},"description":"CEO","sameAs":["http:\/\/twitter.com\/maxlynch","https:\/\/x.com\/maxlynch"],"url":"https:\/\/ionic.io\/blog\/author\/max"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/109","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/comments?post=109"}],"version-history":[{"count":0,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/posts\/109\/revisions"}],"wp:attachment":[{"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/media?parent=109"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/categories?post=109"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/ionic.io\/blog\/wp-json\/wp\/v2\/tags?post=109"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}