do not let "Add Bango Account" form be dismissed by clicking outside (bug 838204)

Author: cvan

media/js/devreg/payments-manage.js

@@ -7,7 +7,10 @@ define('payments-manage', ['payments'], function(payments) {
     }
 
     function newBangoPaymentAccount(e) {
-        var $overlay = payments.getOverlay('add-bango-account');
+        var $overlay = payments.getOverlay({
+            'id': 'add-bango-account',
+            'class': 'undismissable'
+        });
         payments.setupPaymentAccountOverlay($overlay, showAgreement);
     }
 

media/js/devreg/payments.js

@@ -1,11 +1,15 @@
 define('payments', [], function() {
     'use strict';
 
-    function getOverlay(name) {
+    function getOverlay(opts) {
+        var id = opts;
+        if (_.isObject(opts)) {
+            id = opts.id;
+        }
         $('.overlay').remove();
         z.body.addClass('overlayed');
-        var overlay = makeOrGetOverlay(name);
-        overlay.html($('#' + name + '-template').html())
+        var overlay = makeOrGetOverlay(opts);
+        overlay.html($('#' + id + '-template').html())
                .addClass('show')
                .on('click', '.close', _pd(function() {
                    overlay.trigger('overlay_dismissed').remove();

media/js/mkt/overlay.js

@@ -18,7 +18,7 @@
     });
 
     // Dismiss overlay when we click outside of it.
-    z.win.on('click', '.overlay', function(e) {
+    z.win.on('click', '.overlay:not(.undismissable)', function(e) {
         if ($(e.target).parent('body').length) {
             dismiss();
         }

media/js/mkt/utils.js

@@ -72,13 +72,21 @@ $.fn.exists = function(callback, args) {
     return !!len;
 };
 
-function makeOrGetOverlay(id) {
-    var el = document.getElementById(id);
-    if (!el) {
-        el = $('<div class="overlay" id="' + id +'">');
+function makeOrGetOverlay(opts) {
+    var classes = 'overlay',
+        id = opts;
+    if (_.isObject(opts)) {
+        if ('class' in opts) {
+            classes += ' ' + opts.class;
+        }
+        id = opts.id;
+    }
+    var el = $('#' + id);
+    if (!el.length) {
+        el = $('<div class="' + classes + '" id="' + id +'">');
         $('body').append(el);
     }
-    return $(el);
+    return el;
 }
 
 function getTemplate($el) {