From 21c41d0174438a578d15d7b92e61f146a20070de Mon Sep 17 00:00:00 2001
From: Ed Menendez <ed@menendez.com>
Date: Thu, 25 Jul 2013 11:28:51 -0700
Subject: [PATCH 1/5] Added a new "showBackdrop" option which works around the
 problem where the popover appears below the backdrop.

Simply disable the backdrop.
---
 bootstro.js | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/bootstro.js b/bootstro.js
index 7d6f915..ceb05a1 100644
--- a/bootstro.js
+++ b/bootstro.js
@@ -36,7 +36,10 @@ $(document).ready(function(){
             
             margin : 100, //if the currently shown element's margin is less than this value
             // the element should be scrolled so that i can be viewed properly. This is useful 
-            // for sites which have fixed top/bottom nav bar
+            // for sites which have fixed top/bottom nav bar        
+
+            showBackdrop: true, // If false, don't show the overlay.
+
         };
         var settings;
         
@@ -314,7 +317,7 @@ $(document).ready(function(){
             if (count > 0 && $('div.bootstro-backdrop').length === 0)
             {
                 // Prevents multiple copies
-                $('<div class="bootstro-backdrop"></div>').appendTo('body');
+                if (settings.showBackdrop) $('<div class="bootstro-backdrop"></div>').appendTo('body');
                 bootstro.bind();
                 bootstro.go_to(0);
             }

From 285758c74f13e28bae2f53b30110db4a96a315ca Mon Sep 17 00:00:00 2001
From: Ed Menendez <ed@menendez.com>
Date: Thu, 25 Jul 2013 13:37:28 -0700
Subject: [PATCH 2/5] New parameter useBackdropMethod2 is now supported
 (default false). If set to true, it will use a different way of displaying
 the overlay.

The original overlay does not work well if there are 3d transformations on the page (i.e. iScroll). This uses a different way to create the overlay.
---
 bootstro.js | 28 +++++++++++++++++++++++++---
 1 file changed, 25 insertions(+), 3 deletions(-)

diff --git a/bootstro.js b/bootstro.js
index ceb05a1..7a6b1bc 100644
--- a/bootstro.js
+++ b/bootstro.js
@@ -39,7 +39,8 @@ $(document).ready(function(){
             // for sites which have fixed top/bottom nav bar        
 
             showBackdrop: true, // If false, don't show the overlay.
-
+            useBackdropMethod2: false, // Use alternative method to paint backdrop. Work around when there's 
+            // z-index stack confusion (iScroll, etc)
         };
         var settings;
         
@@ -183,6 +184,7 @@ $(document).ready(function(){
             else if (p.title == '') 
                 p.title = t;
 
+            p.container = '#bootstro-wrapper';
             p.content = $el.attr('data-bootstro-content') || '';
             p.content = add_nav_btn(p.content, i);
             p.placement = $el.attr('data-bootstro-placement') || 'top';
@@ -252,7 +254,11 @@ $(document).ready(function(){
                 var $el = get_element(idx);
                 
                 $el.popover(p).popover('show');
-                  
+                $('#bootstro-top').css({top: 0, left: 0, height: $el.offset().top + 'px', width: '100%'});
+                $('#bootstro-left').css({top: $el.offset().top, left: 0, height: $el.outerHeight() + 'px', width: $el.offset().left + 'px'});
+                $('#bootstro-right').css({top: $el.offset().top, left: -1 + $el.offset().left + $el.outerWidth() + 'px', height: $el.outerHeight() + 'px', width: '100%' });
+                $('#bootstro-bot').css({top: $el.offset().top + + $el.outerHeight() + 'px', left: 0, height: '100%', width: '100%' });
+
                 //scroll if neccessary
                 var docviewTop = $(window).scrollTop();
                 var top = Math.min($(".popover.in").offset().top, $el.offset().top);
@@ -317,7 +323,23 @@ $(document).ready(function(){
             if (count > 0 && $('div.bootstro-backdrop').length === 0)
             {
                 // Prevents multiple copies
-                if (settings.showBackdrop) $('<div class="bootstro-backdrop"></div>').appendTo('body');
+                if (settings.showBackdrop)
+                {
+                    if (!settings.useBackdropMethod2)
+                    {
+                        $('<div id="bootstro-wrapper"><div class="bootstro-backdrop"></div></div>').appendTo('body');  
+                    } 
+                    else
+                    {
+                        // Create a box to "punch a hole" through to the element. This works better if you're
+                        // using something that does 3d transforms with z-Index (i.e. iScroll)
+                        $('<div id="bootstro-wrapper" style="z-index: 1;"></div>').appendTo('body');
+                        $('<div id="bootstro-top" class="bootstro-backdrop2"></div>').appendTo('#bootstro-wrapper');  
+                        $('<div id="bootstro-left" class="bootstro-backdrop2"></div>').appendTo('#bootstro-wrapper');
+                        $('<div id="bootstro-right" class="bootstro-backdrop2"></div>').appendTo('#bootstro-wrapper');
+                        $('<div id="bootstro-bot" class="bootstro-backdrop2"></div>').appendTo('#bootstro-wrapper');
+                    }
+                } 
                 bootstro.bind();
                 bootstro.go_to(0);
             }

From 5d33843400b4f39e52d2cca6d1b6779f4772adbf Mon Sep 17 00:00:00 2001
From: Ed Menendez <ed@menendez.com>
Date: Thu, 25 Jul 2013 13:42:49 -0700
Subject: [PATCH 3/5] Update bootstro.css

---
 bootstro.css | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)

diff --git a/bootstro.css b/bootstro.css
index aee415a..c3777ba 100644
--- a/bootstro.css
+++ b/bootstro.css
@@ -45,4 +45,20 @@
 	font-weight:bold;
 }
 
+.bootstro-nav-wrapper button, .bootstro-finish-btn-wrapper button 
+{
+	font-size:12px !important;	
+	padding : 3px 5px 3px 5px !important;
+	font-weight:bold;
+}
+
+.bootstro-backdrop2
+{
+    position: fixed;
+    z-index: 2;
+    opacity: 0.5;
+    background-color: black;
+    filter: alpha(opacity = 50);    
+}
+
 

From 6734aa83969577b9773c0e38f18f2c4ef102cead Mon Sep 17 00:00:00 2001
From: Ed Menendez <ed@menendez.com>
Date: Thu, 25 Jul 2013 13:45:04 -0700
Subject: [PATCH 4/5] Update bootstro.css

---
 bootstro.css | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/bootstro.css b/bootstro.css
index c3777ba..09b6022 100644
--- a/bootstro.css
+++ b/bootstro.css
@@ -45,13 +45,6 @@
 	font-weight:bold;
 }
 
-.bootstro-nav-wrapper button, .bootstro-finish-btn-wrapper button 
-{
-	font-size:12px !important;	
-	padding : 3px 5px 3px 5px !important;
-	font-weight:bold;
-}
-
 .bootstro-backdrop2
 {
     position: fixed;

From 854c32b3a0739e7e6e24d1d98bd9d5096577033a Mon Sep 17 00:00:00 2001
From: Ed Menendez <ed@menendez.com>
Date: Mon, 29 Jul 2013 11:48:57 -0700
Subject: [PATCH 5/5] Fix problem with clicking on backdrop not working with
 2nd backdrop method.

---
 bootstro.js | 10 ++++++++--
 1 file changed, 8 insertions(+), 2 deletions(-)

diff --git a/bootstro.js b/bootstro.js
index 7a6b1bc..58a3d06 100644
--- a/bootstro.js
+++ b/bootstro.js
@@ -239,6 +239,7 @@ $(document).ready(function(){
             bootstro.destroy_popover(activeIndex);
             bootstro.unbind();
             $("div.bootstro-backdrop").remove();
+            $("div.bootstro-backdrop2").remove();
             if (typeof settings.onExit == 'function')
                 settings.onExit.call(this,{idx : activeIndex});
         };
@@ -404,8 +405,13 @@ $(document).ready(function(){
             
             if (settings.stopOnBackdropClick)
             {
-                $("html").on('click.bootstro', 'div.bootstro-backdrop', function(e){
-                    if ($(e.target).hasClass('bootstro-backdrop'))
+                if (settings.useBackdropMethod2) {
+                    var classname = 'bootstro-backdrop2';
+                } else {
+                    var classname = 'bootstro-backdrop';
+                }
+                $("html").on('click.bootstro', 'div.' + classname, function(e){
+                    if ($(e.target).hasClass(classname))
                         bootstro.stop();
                 });
             }