title: A Div Overlay over Cordova InAppBrowser
body: <p>I am working on a Cordova App with the <a href="https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-inappbrowser/index.html" rel="noreferrer">InAppBrowser-Plugin</a>. My Idea is to show a Div/Buttons over the InAppBrowser to execute Cordova native Code.</p>
  
  <p>The problem is that the InAppBrowser Plugin is putting himself on the top z-index. It doesn't matter how i define the z-index of the Div where i am calling the InAppBrowser. </p>
  
  <p>My Code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  </code></pre>
  
  <p>
      </p>
  
  <pre><code>    &lt;meta name="format-detection" content="telephone=yes"&gt;
      &lt;meta name="msapplication-tap-highlight" content="no"&gt;
      &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"&gt;
      &lt;link rel="stylesheet" type="text/css" href="http://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css"&gt;
      &lt;link rel="stylesheet" type="text/css" href="css/index.css"&gt;
  &lt;body ng-controller="unserhombergController"&gt;
  
      &lt;div class="wrapper" id="wrapperID"&gt;
          &lt;div class="linkwrap" id="linkwrapID"&gt;
              &lt;div class="container"&gt;
                  &lt;button class="overButton"&gt;&lt;/button&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;div class="myframe" id="myframeID" ng-init="inappbrowser()" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:-9999999999999999999999999999;"&gt;
             &lt;!--&lt;iframe src="http://unser-homberg.de/" id="frame_id" style="position:fixed; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%; border:none; margin:0; padding:0; overflow:hidden; z-index:999999;"&gt;&lt;/iframe&gt;--&gt; 
  
          &lt;/div&gt;
      &lt;/div&gt;
  
          &lt;script type="text/javascript" src="cordova.js"&gt;&lt;/script&gt;
          &lt;script type="text/javascript" src="scripts/platformOverrides.js"&gt;&lt;/script&gt;
      &lt;script src="scripts/angular/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
      document.addEventListener('deviceready', function onDeviceReady() {
          angular.bootstrap(document, ['unserhomberg']);
      }, false);
  
      var unserhomberg = angular.module('unserhomberg', []);
      &lt;/script&gt;
      &lt;script type="text/javascript" src="scripts/index.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>
  </p>
  
  <pre><code>unserhomberg.controller('unserhombergController', function unserhombergController($scope) {
  $scope.doitwork = "yes it does";
  $scope.getImage = [];
  
  function getImageFromCamera() {
      console.log("called");
      navigator.camera.getPicture(onSuccessCam, onFailCam, {
          quality: 75,
          targetHeight: 300,
          destinationType: Camera.DestinationType.FILE_URI,
      });
  
      function onSuccessCam(imageData) {
          console.log(imageData);
         // $scope.getImage.push
      }
  
      function onFailCam(message) {
          console.log('Failed because: ' + message);
      };
  }
  
  $scope.inappbrowser = function () {
      cordova.InAppBrowser.open('http://unser-homberg.de/', '_blank', 'location=no');
  }});
  
  .myframe {
  z-index:0;
  overflow:hidden;
  </code></pre>
  
  <p>}</p>
  
  <p>.container{</p>
  
  <pre><code>z-index: 999999999999999999;
      position:absolute;
  
  top: 93%;
  left: 92%;
  height:50px;
  width:50px;
  </code></pre>
  
  <p>}</p>
  
  <p>The Button should apper like in this Example where i used a iframe and not the InAppBrowser-Plugin:
  <a href="http://i.stack.imgur.com/WKoaK.jpg" rel="noreferrer">Works with iFrame</a></p>